How to check if mouse is over a cross shape on canvas?
How to check if mouse is over a cross shape on canvas?
1 answer
by
daisha ,
4 months ago
@hal.littel
To check if the mouse is over a cross shape on a canvas, you can follow these steps:
- Get the coordinates of the mouse pointer when it moves over the canvas using the mousemove event.
- Determine the coordinates of the cross shape on the canvas. This includes the x and y positions of the top-left corner of the cross shape, as well as its width and height.
- Check if the mouse coordinates are within the boundaries of the cross shape. This can be done by comparing the mouse coordinates with the coordinates and dimensions of the cross shape.
- If the mouse coordinates are within the boundaries of the cross shape, then the mouse is over the cross shape on the canvas.
Here is an example using JavaScript and HTML5 canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html>
<html>
<head>
<title>Check if Mouse is Over Cross Shape</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a cross shape on the canvas
ctx.beginPath();
ctx.moveTo(75, 100);
ctx.lineTo(125, 100);
ctx.moveTo(100, 75);
ctx.lineTo(100, 125);
ctx.stroke();
// Check if mouse is over cross shape
canvas.addEventListener('mousemove', function(e) {
var rect = canvas.getBoundingClientRect();
var mouseX = e.clientX - rect.left;
var mouseY = e.clientY - rect.top;
// Coordinates and dimensions of the cross shape
var crossX = 75;
var crossY = 75;
var crossWidth = 50;
var crossHeight = 50;
// Check if mouse is over cross shape
if (mouseX >= crossX && mouseX <= crossX + crossWidth && mouseY >= crossY && mouseY <= crossY + crossHeight) {
console.log('Mouse is over cross shape');
}
});
</script>
</body>
</html>
|
In this example, we draw a cross shape on the canvas and then check if the mouse is over the cross shape when it moves. If the mouse coordinates are within the boundaries of the cross shape, then a message is logged to the console.