const canvas = document.createElement('canvas');

const c = canvas.getContext('2d');

let mouseX = 0, mouseY = 0;

canvas.width = 400;

canvas.height = 400;

document.body.appendChild(canvas);

document.body.style.margin = 0;

c.fillStyle = 'black';

c.fillRect(0, 0, canvas.width, canvas.height);

document.addEventListener('mousemove', e => {

  mouseX = e.clientX;

  mouseY = e.clientY;

});

// no scroll on mobile: 

document.addEventListener('touchmove', 

  e => e.preventDefault(), { passive: false });

document.addEventListener('touchmove', e => {

  mouseX = e.touches[0].clientX;

  mouseY = e.touches[0].clientY;

});

const loop = () => {

  c.fillStyle = 'black';

  c.fillRect(0, 0, canvas.width, canvas.height); 	

  c.lineWidth = 3;

  c.strokeStyle = 'blue';

  c.beginPath();

  c.moveTo(20, 20);

  c.lineTo(110, 20);

  c.lineTo(110, 110);

  c.lineTo(20, 110);

  c.closePath();

  if (c.isPointInPath(mouseX, mouseY)) {

    c.strokeStyle = 'white';

    c.fillStyle = 'red';

    c.fill();

  }

  c.stroke();

  requestAnimationFrame(loop);

};

loop();