Canvas Compositing

​

<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>

​