JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body { margin: 0; }
#canvas { border: solid 25px #000; cursor: none; }

JavaScript

// helper functions

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

// canvas
let firstRender = true;
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth - 50;
canvas.height = window.innerHeight - 50;
let ctx = canvas.getContext('2d');

// virtual canvas for rectangles layer
let canvas2 = document.createElement("canvas");
canvas2.width = window.innerWidth - 50;
canvas2.height = window.innerHeight - 5;
let canvas2ctx = canvas2.getContext("2d");


let ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: 'blue',
  draw: function() {
    canvas2ctx.beginPath();
    canvas2ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    canvas2ctx.closePath();
    canvas2ctx.fillStyle = this.color;
    canvas2ctx.fill();
  }
};

function draw(e) {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x = e.clientX;
  ball.y = e.clientY;
  
  ctx.drawImage(canvas2, 0, 0);
	
  if(firstRender) { 
  	drawRandomRectangles()
  	firstRender = false;
  }
}

function drawRandomRectangles() {
	for(i = 0; i < 50; i++) {
  canvas2ctx.beginPath();
  canvas2ctx.rect(randomInt(0, window.innerWidth - 50), randomInt(0, window.innerWidth - 50), randomInt(5, 20), randomInt(5, 20));
  canvas2ctx.stroke();
  }
}

canvas.addEventListener('mousemove', function(e) {
  draw(e);
});


ball.draw();