JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <tbody><tr>
          <td><canvas id="tut0" width="125" height="125"></canvas><br><label id="lab0">source-over</label></td>
          <td><canvas id="tut1" width="125" height="125"></canvas><br><label id="lab1">source-in</label></td>
          <td><canvas id="tut2" width="125" height="125"></canvas><br><label id="lab2">source-out</label></td>
          <td><canvas id="tut3" width="125" height="125"></canvas><br><label id="lab3">source-atop</label></td>
        </tr>
        <tr>
          <td><canvas id="tut4" width="125" height="125"></canvas><br><label id="lab4">destination-over</label></td>
          <td><canvas id="tut5" width="125" height="125"></canvas><br><label id="lab5">destination-in</label></td>
          <td><canvas id="tut6" width="125" height="125"></canvas><br><label id="lab6">destination-out</label></td>
          <td><canvas id="tut7" width="125" height="125"></canvas><br><label id="lab7">destination-atop</label></td>
        </tr>
        <tr>
          <td><canvas id="tut8" width="125" height="125"></canvas><br><label id="lab8">lighter</label></td>
          <td><canvas id="tut9" width="125" height="125"></canvas><br><label id="lab9">darker</label></td>
          <td><canvas id="tut10" width="125" height="125"></canvas><br><label id="lab10">copy</label></td>
          <td><canvas id="tut11" width="125" height="125"></canvas><br><label id="lab11">xor</label></td>
        </tr>
      </tbody></table>

JavaScript

var blue = "rgba(0,0,255,0.5)";
var red = "rgba(255,0,0,0.5)";


var compositeTypes = [
  'source-over','source-in','source-out','source-atop',
  'destination-over','destination-in','destination-out','destination-atop',
  'lighter','darker','copy','xor'
];
function draw(){
  for (i=0;i<compositeTypes.length;i++){

    var ctx = document.getElementById('tut'+i).getContext('2d');

    // draw rectangle
    ctx.fillStyle = blue;
    ctx.fillRect(15,15,70,70);

    // set composite property
    ctx.globalCompositeOperation = compositeTypes[i];
    
    // draw circle
    ctx.fillStyle = red;
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
  }
}

draw();