JSFiddle - React, Tailwind, and code Playground

by Tushar Thakare

HTML

<canvas id="canvas"></canvas>

JavaScript

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

var bk=new Image();
bk.onload=start;
bk.src='https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500';
var cut=new Image();

cut.onload=start;
cut.src="https://cdn.pixabay.com/photo/2014/07/09/10/04/man-388104_640.jpg";
var imgcount=2;

function start(){
  if(--imgcount>0){return;}
  canvas.width=bk.width;
  canvas.height=bk.height;
  ctx.drawImage(bk,0,0);
  setTimeout(function(){
  ctx.globalCompositeOperation='destination-in';

  ctx.drawImage(cut,139,7.5, 316.5, 483);
  // always clean up -- reset the default compositing mode
  ctx.globalCompositeOperation='source-over';
  }, 1000);
}