sample: canvas image masking via globalCompositeOperation option

by sii_side

HTML

<p>赤い四角→青い円の順に描画（背景：緑）</p>

<img id="circle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKASURBVHja7JpPSxtBGMY3iQSEnAKCJ7EQKAiBlEi8CB5UiNhj+xUslp4UBaFHTx48CQG/Qj1WFFMEIfQgKQ0NCELA4kkQcgoECiE+Q55AKNndyezsZib4wHMIyc68v8y/d2Y21u12nUlQ3JkQTQzI1OCH+bWqVcH//bE4HCSgEvAKvAxn4TfwWzjF71vwPfwA38E3dEd7iyhKBP0F/gCnPX4ngPJ0X034DC7BtXGNkQX4Av4Db/lAuCnNZ3+zrGyUIEn4iABFjV2zSKAj1hEqyAx8Be9xTOhWgmVfjdrC8RHHQpUDOmytsHWyukEK8E94LsLZdY51FnSBZODvA9NolEqx7kxQEDHovnFsjEszjCEZBOQQzhmwiOcYixKIeHjHoIxkx+tPjfu0RsIgkIRXq8Q9WmPTwDxx061V3EC2DU56t2VBkkwATZWIbVoGpKCYAEal9H8ZtCvIugV7qnUZkJwFIDkZkIwFIBkZkFkLQGZlQFIWgKR0bnWN0jCQlgVxt2RAniwAeZIBaVgA0pABqVkAUpMBKVsAUpYB+eX0TgBNVZMx+oK0nd4xpqk6Y4xS60jJYJDSKBsrMZguDYQ4d5uMvFb2A0fTkb8miVi+qhw+CPITg0BOvJYGv1xr35B1pcYe4qiC/IM/ws9jhHhmDO0gIP104L1fQSGpzbp90ybZNP4WXoIfI4R4ZJ23qmm8m+osuBIBRIV11YPsR/zS51X4OKSpucOyV0fdTqjsEMUEsAu/07xoXrLMXdbhhA0y2NU2YHFrf6qYaDb57CLLqqsGo+OeXWSin+DPTu/uT1jc/Ymrs/yQ9eCBARv3wsBg/76mI1fs9TWnV5Bw9CLAANaHdPY9oOd2AAAAAElFTkSuQmCC">

<img id="rect" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAA8SURBVHja7M4BDQAACAOga//OWkM3SEBNLupoaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpvWqtAAMAQaoBY3rsEsoAAAAASUVORK5CYII=">

CSS

canvas {
  background-color: #0f0;
}

img {
  display: none;
}

JavaScript

var circle = document.querySelector("#circle");
var rect   = document.querySelector("#rect");

var op = ["source-over", "destination-atop", "lighter", "copy", "xor"];

op.forEach(function(i) {
	var canvas = document.createElement("canvas");
  canvas.width = 50;
  canvas.height = 50;
 
  var ctx = canvas.getContext("2d");
  ctx.globalCompositeOperation = i;
  ctx.drawImage(rect, 0, 0);
  ctx.drawImage(circle, 0, 0);

  document.body.appendChild(canvas);
});