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();

// no scrolling on mobile

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

  passive: false

});

const hasTouch =

  navigator.maxTouchPoints != null && navigator.maxTouchPoints > 0;

// looking forward to `navigator?.maxTouchPoints > 0`

// being better supported

function touchify(e) {

  const touch = [];

  touch.x = touch.y = 0;

  if (e.touches != null && e.touches.length > 0) {

    touch.x = e.touches[0].clientX;

    touch.y = e.touches[0].clientY;

    for (let i = 0; i < e.touches.length; i++) {

      touch[i] = e.touches[i];

    }

  } else {

    touch.x = e.clientX;

    touch.y = e.clientY;

    touch[0] = { clientX: e.clientX, clientY: e.clientY };

  }

  return touch;

}

let moveOrTouchMove;

if (hasTouch) {

  moveOrTouchMove = 'touchmove';

} else {

  moveOrTouchMove = 'mousemove';

}

function dot(x, y, radius, color) {

  const el = document.createElement('div');

  const size = `${radius * 2}px`;

  Object.assign(el.style, {

    position: 'absolute',

    left: `${x}px`,

    top: `${y}px`,

    width: size,

    height: size,

    transform: `translate(${-radius}px, ${-radius}px)`,

    borderRadius: '50%',

    background: color

  });

  el.classList.add('dot');

  document.body.appendChild(el);

  return el;

}

let dotX = 100,

  dotY = 100,

  touchX = 200,

  touchY = 150,

  damp = 12,

  dotEl = dot(dotX, dotY, 20, 'red');

document.addEventListener(moveOrTouchMove, e => {

  const { x, y } = touchify(e);

  touchX = x;

  touchY = y;

});

function loop() {

  dotX += (touchX - dotX) / damp;

  dotY += (touchY - dotY) / damp;

  Object.assign(dotEl.style, {

    left: `${dotX}px`,

    top: `${dotY}px`

  });

  window.requestAnimationFrame(loop);

}

loop();

<meta name="viewport" content="width=device-width, initial-scale=1.0">

document.addEventListener('touchmove', 

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

  document.body.innerHTML = 'Hi, no page scrolling here...';