canvas globalCompositeOperation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

* {
  box-sizing: border-box;
}
#app {
  display: flex;
  flex-wrap: wrap;
}
.box {
  border: 1px solid gray;
  width: 120px;
}
.box__body canvas {
  display: block;
  margin: auto;
}
.box__title {
  text-align: center;
}
    
  </style>
</head>

var types = [
    "source-over",
    "source-in",
    "source-out",
    "source-atop",
    "destination-over",
    "destination-in",
    "destination-out",
    "destination-atop",
    "lighter",
    "copy",
    "xor",
    "multiply",
    "screen",
    "overlay",
    "darken",
    "lighten",
    "color-dodge",
    "color-burn",
    "hard-light",
    "soft-light",
    "difference",
    "exclusion",
    "hue",
    "saturation",
    "color",
    "luminosity"
];

var w = 100, h = 100, velocity = 2;
var circles = types.map(function (t) {
    var rad = Math.floor(Math.random() * 30 + 30) * Math.PI / 180;
    return {
        r: 10,
        x: Math.floor(Math.random() * (w - 10) + 10),
        y: Math.floor(Math.random() * (h - 10) + 10),
        dx: Math.sin(rad) * velocity,
        dy: Math.cos(rad) * velocity,
        alpha: t
    };
});

var canvas = d3.selectAll("canvas");

function drawBg (ctx) {
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 20;
    ctx.shadowColor = "red";
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(50, 30, 20, 0, Math.PI * 2, false);
    ctx.fill();

ctx.shadowColor = "blue";
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.arc(30, 70, 20, 0, Math.PI * 2, false);
    ctx.fill();

ctx.shadowColor = "green";
    ctx.fillStyle = "green";
    ctx.beginPath();
    ctx.arc(70, 70, 20, 0, Math.PI * 2, false);
    ctx.fill();
}
function redraw () {
    canvas.each(function (d) {
        var ctx = this.getContext("2d");
        ctx.save();
        ctx.clearRect(0, 0, w, h);

drawBg(ctx);
        ctx.fillStyle = "yellow";
        ctx.globalCompositeOperation = d.alpha;
        ctx.beginPath();
        ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2, false);
        ctx.fill();

if (!d.fixed) {
            d.x += d.dx;
            d.y += d.dy;
            if (d.x < 0 || d.x > (w - d.r)) { d.dx *= -1; }
            if (d.y < 0 || d.y > (h - d.r)) { d.dy *= -1; }
        }
        
        ctx.restore();
    });

window.requestAnimationFrame(redraw);
}

redraw();
  
    
  </script>
</body>

https://d3js.org/d3.v4.min.js