JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <canvas id="canvas" width="480" height="320"></canvas>
  </body>
</html>

JavaScript

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

// color changes the shape's colors
function drawShapes(squarePos, circlePos, rectPos) {
  ctx.clearRect(0, 0, 480, 320);
  ctx.beginPath();
  ctx.rect(squarePos.x, squarePos.y, 50, 50);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(circlePos.x, circlePos.y, 20, 0, Math.PI*2, false);
  ctx.fillStyle = 'green';
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.rect(rectPos.x, rectPos.y, 100, 40);
  ctx.strokeStyle = 'gold';
  ctx.stroke();
  ctx.closePath();
}

function rand() {
  return Math.floor(Math.random() * 320);
}

function loop() {
 drawShapes({x: rand(), y: rand()},
            {x: rand(), y: rand()},
            {x: rand(), y: rand()});
 /* run the function loop again when the browser is
     ready to show another animation frame. */
  window.requestAnimationFrame(loop);
}

loop();