TAG
CSS
JavaScript
Result
Run
License
<h3>Please click to the rect.</h3> <canvas id="mycanvas" width="200" height="100"></canvas>
#mycanvas { border: 1px solid #CCC; } .mouseover { cursor: pointer; }
window.addEventListener("load", function() { const elCanvas = document.getElementById("mycanvas"); let context = elCanvas.getContext("2d"); let clicked = false; let newRect = new Path2D(); newRect.rect(30, 20, 100, 60); context.fill(newRect); elCanvas.addEventListener("click", e => { if(context.isPointInPath(newRect, e.offsetX, e.offsetY)) { context.clearRect(0, 0, elCanvas.width, elCanvas.height); newRect = new Path2D(); context.fillStyle = clicked ? "#000000" : "#FF0000"; newRect.rect(30, 20, 100, 60); context.fill(newRect); clicked = !clicked; } }); elCanvas.addEventListener("mousemove", e => { let el = e.currentTarget; if (context.isPointInPath(newRect, e.offsetX, e.offsetY)) { el.classList.add("mouseover"); } else { el.classList.remove("mouseover"); } }); });
Console
expand_less
License
License
by DevDic
Close