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, 120);
  c.lineTo(20, 110);
  c.closePath();
 
  if (c.isPointInPath(mouseX, mouseY)) {
    c.strokeStyle = 'white';
    c.fillStyle = 'red';
    c.fill();
  }
  c.stroke();
 
  requestAnimationFrame(loop);
};
 
loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.