JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvasPart" style="position: relative;top:5%">
  <canvas id="myCanvas" width="1000" height="600" style="position: absolute; left: 0; top: 0; z-index: 0; border:1px solid #d3d3d3; background-image: url(' https://i.stack.imgur.com/3pbfM.jpg')">Your browser does not support the HTML5 canvas tag.</canvas>
  <canvas id="layer2" width="1000" height="600" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>


<img id="scream" src="https://i.stack.imgur.com/3pbfM.jpg" alt="The Scream" width="960" height="576" style="display: none;">

JavaScript

// Actual canvas code
var c2 = document.getElementById("layer2");
var ctx2 = c2.getContext("2d");

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

var xObj = [100, 200, 300, 400, 500, 600]
var yObj = [600, 500, 400, 300, 200, 100]
var i, x, y;

function startLoop(i, cb) {
  console.log("count: ", i)
  var centerX = xObj[i];
  var centerY = yObj[i];
  var radius = 10;

  var alpha = 1, /// current alpha value
    delta = 0.01; /// delta = speed
  var num = 0
  loop();

  function loop() {
    console.log("inside loop " + centerX + " " + centerY);
    alpha -= delta;
    if (alpha <= 0) {
      num = 2;
      
      if (cb && i < xObj.length)
        cb(++i, cb)
      return;
    }

    ctx2.clearRect(0, 0, 1000, 600);
    ctx2.globalAlpha = alpha;
    ctx2.beginPath();
    ctx2.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx2.fillStyle = "#FF0000";
    ctx2.fill();
    ctx2.lineWidth = 1;
    ctx2.strokeStyle = '#003300';
    ctx2.stroke();
    setTimeout(loop, 1000 / 60)
  }
}

startLoop(0, startLoop)