JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div"></div>
<canvas id='canvas'></div>

CSS

#div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
#canvas {
    width: 300px;
    height: 100px;
    border: 1px solid black;
}

JavaScript

var div = document.getElementById('div');
div.addEventListener('mousemove', function() {
    div.style.background = 'yellow';
});
div.addEventListener('mouseout', function() {
    div.style.background = 'white';
});
div.addEventListener('mousedown', function() {
    div.style.background = 'red';
});
div.addEventListener('mouseup', function() {
    div.style.background = 'yellow';
});

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(20,20,40,40);
canvas.addEventListener('mousemove', function(event) {
    //console.log(event.clientX, event.clientY);
    if (event.clientX > 29 && event.clientX < 70 && event.clientY > 125 && event.clientY < 151) {
        ctx.fillStyle = 'blue';
        ctx.fillRect(20,20,40,40);
    } else {
        ctx.clearRect(0,0,300,100);
        ctx.fillStyle = 'red';
        ctx.fillRect(20,20,40,40);
    }
});
canvas.addEventListener('mousedown', function(event) {
    if (event.clientX > 30 && event.clientX < 70 && event.clientY > 125 && event.clientY < 150) {
        // do somethin, ie go to page
        ctx.fillStyle = 'green';
        ctx.fillRect(60,20,40,20);
    }
});