JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

//coordinates of rectangle
  var xp = 20;
  var yp = 20;
  var wp = 80;
  var hp = 80;
  
  //saved background image
	var imageData = null;

function doDraw() {

	var can = document.getElementById("myCanvas");
  can.width = 500;
  can.height = 500;
  var context = can.getContext("2d");
  
	//draw background contents  
  
  var image = getImage();
  context.drawImage(image, 0, 0);
  context.drawImage(image, 100, 0);
  context.drawImage(image, 0, 100);
  context.drawImage(image, 100, 100);

	drawRectangle();
}
    
function drawRectangle() {    
  
  var can = document.getElementById("myCanvas");
  var context = can.getContext("2d");
  
  //capture background 
  imageData = context.getImageData(xp, yp, wp, hp);
  
  //draw Rectangle
  context.rect(xp, yp, wp, hp);
  context.fill();
  
  setTimeout(function() {
  	eraseRectangle();
  }, 1000);
}

function eraseRectangle() {
	var can = document.getElementById("myCanvas");
  var context = can.getContext("2d");
  
  context.putImageData(imageData, xp, yp);
  
  setTimeout(function() {
  	drawRectangle();
  }, 1000);
}

doDraw();

function getImage() {
var image1 = new Image(237, 110);
  image1.src =...