JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="under-img"></div>
<canvas id="canvas" width="600" height="600"></canvas>

CSS

.under-img {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfpNJRQJQNsSi-9WF9AGfPBZh0P91jaH4l-5NiSuZjLMCZ0txzLQ');
  width: 600px;
  height: 600px;
  position: absolute;
  z-index: 1;
  background-size:500px;
}
canvas {
  position: absolute;
  z-index: 2;
}

JavaScript

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

var offsetX = 150;
var offsetY = 150;
var w = 200;
var h = 100;


ctx.fillStyle = "red";
ctx.rect(0, 0, 600, 600);
ctx.fill();

ctx.clearRect(offsetX,offsetY, w, h);
ctx.strokeRect(offsetX, offsetY, w, h);
ctx.clearRect(offsetX-50,offsetY+50, w, h);
ctx.strokeRect(offsetX-50, offsetY+50, w, h);
//ctx.clearRect(offsetX,offsetY, w, h); //uncomment to resolve the issue