SOURCE

var c = document.getElementById("canvasEl");
var ctx = c.getContext("2d");


// source-over
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 50, 50);
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 50, 50);

ctx.fillStyle = "black";
ctx.fillText("source-over", 20, 120);


// source-atop
ctx.fillStyle = "red";
ctx.fillRect(150, 20, 50, 50);
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "blue";
ctx.fillRect(180, 50, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("source-atop", 150, 120);


// source-in
ctx.fillStyle = "red";
ctx.fillRect(280, 20, 50, 50);
// 去掉此处注释才能看到最终效果
// ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "blue";
ctx.fillRect(310, 50, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("source-in", 280, 120);
ctx.fillText("(去掉注释才能看到效果)", 280, 135);


// source-out
ctx.fillStyle = "red";
ctx.fillRect(410, 20, 50, 50);
// 去掉此处注释才能看到最终效果
// ctx.globalCompositeOperation = "source-out";
ctx.fillStyle = "blue";
ctx.fillRect(440, 50, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("source-out", 410, 120);
ctx.fillText("(去掉注释才能看到效果)", 410, 135);


// destination-over
ctx.fillStyle = "red";
ctx.fillRect(20, 200, 50, 50);
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "blue";
ctx.fillRect(50, 230, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("destination-out", 20, 300);


// destination-atop
ctx.fillStyle = "red";
ctx.fillRect(150, 200, 50, 50);
// 去掉此处注释才能看到最终效果
// ctx.globalCompositeOperation = "destination-atop";
ctx.fillStyle = "blue";
ctx.fillRect(180, 230, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("destination-atop", 150, 300);
ctx.fillText("(去掉注释才能看到效果)", 150, 315);


// destination-in
ctx.fillStyle = "red";
ctx.fillRect(280, 200, 50, 50);
// 去掉此处注释才能看到最终效果
// ctx.globalCompositeOperation = "destination-in";
ctx.fillStyle = "blue";
ctx.fillRect(310, 230, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("destination-in", 280, 300);
ctx.fillText("(去掉注释才能看到效果)", 280, 315);


// destination-out
ctx.fillStyle = "red";
ctx.fillRect(410, 200, 50, 50);
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "blue";
ctx.fillRect(440, 230, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("destination-out", 410, 300);


// lighter
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20, 380, 50, 50);
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(50, 410, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("lighter", 20, 480);


// copy
ctx.fillStyle = "red";
ctx.fillRect(150, 380, 50, 50);
// 去掉此处注释才能看到最终效果
// ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "blue";
ctx.fillRect(180, 410, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("copy", 150, 480);
ctx.fillText("(去掉注释才能看到效果)", 150, 495);


// xor
ctx.fillStyle = "red";
ctx.fillRect(280, 380, 50, 50);
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "blue";
ctx.fillRect(310, 410, 50, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillText("xor", 280, 480);

<canvas id="canvasEl" width="600px" height="1000px"></canvas>