Canvas Compositing

index.html

<canvas id="picture0" width=200 height=200></canvas>
<canvas id="picture1" width=200 height=200></canvas>
<canvas id="picture2" width=200 height=200></canvas>
<canvas id="picture3" width=200 height=200></canvas>

<script>
var compositing = ["source-over", "lighter", "darker", "xor"];

for (var i=0; i<4; i++) {
  render(i);
}

function render(i) {
  var canvas = document.getElementById("picture" + i);
  var ctx = canvas.getContext("2d");

  ctx.globalAlpha = 0.5;
  ctx.globalCompositeOperation = compositing[i];

  ctx.font = "14pt sans-serif";
  ctx.fillText(compositing[i],40,16);

  ctx.fillStyle = "red";
  ctx.fillRect(20,20,100,100);

  ctx.fillStyle = "green";
  ctx.fillRect(60,60,100,100);

  ctx.fillStyle = "blue";
  ctx.fillRect(100,10,80,80);
}

</script>
<style>
  canvas {
    float: left;
    margin: 12px;
    box-shadow: 0 0 4px #999;
  }
</style>