JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');



ctx.fillStyle = 'red';
ctx.fillRect(0,0,50,50);



ctx.fillStyle = 'blue';
ctx.fillRect(30,30,50,50);


// now take a bit in the middle and make it more transparent!
ctx.globalAlpha = 0.4;



var can2 = document.createElement('canvas');
  can2.height = can.height;
  can2.width = can.width;
  ctx2 = can2.getContext('2d');

// save what was there
ctx2.drawImage(can, 20,20,40,50,
                    20,20,40,50);

// erase what was there
ctx.clearRect(20,20,40,50);

// now draw it back, this time more transparent!
ctx.drawImage(can2, 20,20,40,50,
                    20,20,40,50);