JSFiddle - React, Tailwind, and code Playground

by YiuJia

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<canvas id="canvas"></canvas>
<script>


</script>
<p>Move the cursor inside the canvas to move the red square.</p>
<p>PosX : <span id="posx"></span></p>
<p>PosY : <span id="posy"></span></p>
</body>
</html>

CSS

canvas {
    border: 1px solid #d3d3d3;
    background-color: #f1f1f1;
}

JavaScript

var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 600;
var ctx = canvas.getContext("2d");

function mouseOverHandler(e){
var posx = document.getElementById('posx');
var posy = document.getElementById('posy');

    posXsouris2 =   e.pageX;
    posYsouris2 =   e.pageY;
    
posx.innerText = posXsouris2;
posy.innerText = posYsouris2;

    if(posYsouris2 >= 450 && posYsouris2 <= 600){
        if(posXsouris2>=20 && posXsouris2 <= 300){
            canvas.style.cursor = "pointer";
            Bonus1 = true;
        }else{
            canvas.style.cursor = "default";
        }
    }else{
            canvas.style.cursor = "default";
        }
}
canvas.addEventListener("mousemove", mouseOverHandler,false);