W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<style>
canvas {
  border: 1px solid grey;
  margin: 5px;
}
</style>

<body>
<h1>HTML5 Canvas</h1>
<h2>The globalCompositeOperation Property</h2>

for (let n = 0; n < gco.length; n++) {
  document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
  const canvas = document.createElement("canvas");
  canvas.width = 120;
  canvas.height = 100;
  document.getElementById("p_" + n).appendChild(canvas);
  const ctx = canvas.getContext("2d");  
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 50, 50);
  ctx.globalCompositeOperation = gco[n];
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.arc(50, 50, 30, 0, 2 * Math.PI);
  ctx.fill();
  document.write("</div>");
}</script>

</body>
</html>

​x
 
<!DOCTYPE html><html><style>canvas {  border: 1px solid grey;  margin: 5px;}</style>​<body><h1>HTML5 Canvas</h1><h2>The globalCompositeOperation Property</h2>​<script>const gco = new Array();gco.push("source-atop");gco.push("source-in");gco.push("source-out");gco.push("source-over");gco.push("destination-atop");gco.push("destination-in");gco.push("destination-out");gco.push("destination-over");gco.push("lighter");gco.push("copy");gco.push("xor");​for (let n = 0; n < gco.length; n++) {  document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");  const canvas = document.createElement("canvas");  canvas.width = 120;  canvas.height = 100;  document.getElementById("p_" + n).appendChild(canvas);  const ctx = canvas.getContext("2d");    ctx.fillStyle = "blue";  ctx.fillRect(10, 10, 50, 50);  ctx.globalCompositeOperation = gco[n];  ctx.beginPath();  ctx.fillStyle = "red";  ctx.arc(50, 50, 30, 0, 2 * Math.PI);  ctx.fill();  document.write("</div>");}</script>​</body></html>