JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200" height="200"></canvas>

CSS

#canvas {
 border: 1px solid #000;   
}

JavaScript

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

var MOUSE = {
  down: false,
  up: true,
  x: 0,
  y: 0
}

c.addEventListener('touchstart', function (e) {

  e.preventDefault();

  var touch = e.targetTouches[0];
  MOUSE.x = touch.pageX;
  MOUSE.y = touch.pageY;

  MOUSE.down = true;
  MOUSE.up = false;

}, false);

c.addEventListener('touchend', function (e) {

  e.preventDefault();

  MOUSE.down = true;
  MOUSE.up = false;


}, false);

c.onmousedown = function (e) {
  MOUSE.down = true;
  MOUSE.up = false;
}

c.onmouseup = function (e) {
  MOUSE.down = false;
  MOUSE.up = true;
}

c.onmouseout = function (e) {
  MOUSE.down = false;
}

c.onmousemove = function (e) {
  if (e.offsetX) {
    MOUSE.x = e.offsetX;
    MOUSE.y = e.offsetY;
  } else if (e.layerX) {
    MOUSE.x = e.layerX;
    MOUSE.y = e.layerY;
  };
};

function main() {
  t.clearRect(0, 0, c.width, c.height);

  t.beginPath();
  t.rect(50, 50, 100, 100);
  t.closePath

  if (t.isPointInPath(MOUSE.x, MOUSE.y)) {
    t.fillStyle = "#DECAFF";

    if (MOUSE.down) {
      window.open("http://www.google.com");
      MOUSE.down = false;
    }

  } else {
    t.fillStyle = "#FACADE";
  }

  t.fill();

}

mainLoop = setInterval(function () {
  main();
}, (1000 / 60));