How to handle mouse events on an HTML5 canvas?

To correctly handle mouse events on HTML5 canvas, first add an event listener to canvas, then calculate the coordinates of the mouse relative to canvas, then judge whether it interacts with the drawn object through geometric detection, and finally implement interactive modes such as drag and drop. 1. Use addEventListener to bind mousedown, mousemove, mouseup and mouseleave events for canvas; 2. Use getBoundingClientRect method to convert clientX/clientY to coordinates relative to canvas; 3. Use manual geometric calculations (such as rectangle boundary or circle distance formula) to detect whether the mouse is hovering on the drawn figure; 4. Maintain an array of objects containing all figures, judge the selected and update the position in the mouse event, and repaint the picture with the redraw function; you must always manually track the figure state and redraw canvas after interaction to achieve complete interaction. This is a process of building from scratch but flexible control.

Handling mouse events on an HTML5 canvas require a slightly different approach compared to regular DOM elements because the canvas is treated as a single element — all drawing happens within it, but the interactions must be manually mapped to positions in the drawing space.

Here's how to properly handle mouse events on a canvas:

1. Attach Event Listeners to the Canvas

First, get a reference to the canvas element and attach standard mouse event listeners such as mousedown , mousemove , mouseup , and mouseleave .

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);
canvas.addEventListener('mouseleave', handleMouseLeave);

2. Get Mouse Position Relative to the Canvas

The default clientX and clientY from mouse events are relative to the viewport, not the canvas. You need to convert them to coordinates relative to the canvas, especially if your canvas is positioned or scaled.

Use getBoundingClientRect() to get accurate positioning:

 function getMousePos(canvas, evt) {
    const rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

Now use this inside your event handlers:

 function handleMouseMove(event) {
    const mousePos = getMousePos(canvas, event);
    console.log('Mouse at:', mousePos.x, mousePos.y);
}

This is essential for detecting if the mouse is over a shape you've drawn.

3. Detect Interaction with Drawn Objects

Since the canvas doesn't track individual shapes, you have to manually check if the mouse is over a drawn object by using geometric checks.

For example, to detect if the mouse is over a rectangle:

 function isInsideRect(mouseX, mouseY, rectX, rectY, width, height) {
    return mouseX >= rectX && mouseX <= rectX width &&
           mouseY >= rectY && mouseY <= rectY height;
}

// Usage in event handler
function handleMouseMove(event) {
    const mousePos = getMousePos(canvas, event);
    const hovering = isInsideRect(mousePos.x, mousePos.y, 50, 50, 100, 100);
    console.log(&#39;Over rectangle:&#39;, hovering);
}

For circles, use distance formula:

 function isInsideCircle(mouseX, mouseY, centerX, centerY, radius) {
    const dx = mouseX - centerX;
    const dy = mouseY - centerY;
    return Math.sqrt(dx*dx dy*dy) <= radius;
}

You'll need to keep track of all drawn objects in an array or data structure to loop through them during hit detection.

4. Handle Common Interaction Patterns

Here's a practical example using drag-and-drop on a rectangle:

 let isDragging = false;
let selectedShape = null;

const shapes = [
    { type: 'rect', x: 50, y: 50, w: 100, h: 80, color: 'blue' },
    { type: 'circle', x: 200, y: 100, r: 30, color: 'green' }
];

function handleMouseDown(event) {
    const mousePos = getMousePos(canvas, event);

    // Check shapes in reverse order (topmost first)
    for (let i = shapes.length - 1; i >= 0; i--) {
        const shape = shapes[i];
        if (shape.type === 'rect') {
            if (isInsideRect(mousePos.x, mousePos.y, shape.x, shape.y, shape.y, shape.w, shape.h)) {
                isDragging = true;
                selectedShape = shape;
                break;
            }
        } else if (shape.type === 'circle') {
            if (isInsideCircle(mousePos.x, mousePos.y, shape.x, shape.y, shape.y, shape.r)) {
                isDragging = true;
                selectedShape = shape;
                break;
            }
        }
    }
}

function handleMouseMove(event) {
    if (!isDragging || !selectedShape) return;

    const mousePos = getMousePos(canvas, event);

    // Move the shape
    if (selectedShape.type === 'rect') {
        selectedShape.x = mousePos.x - selectedShape.w / 2;
        selectedShape.y = mousePos.y - selectedShape.h / 2;
    } else if (selectedShape.type === 'circle') {
        selectedShape.x = mousePos.x;
        selectedShape.y = mousePos.y;
    }

    // Redraw canvas
    redraw();
}

function handleMouseUp() {
    isDragging = false;
    selectedShape = null;
}

function handleMouseLeave() {
    isDragging = false;
    selectedShape = null;
}

function redraw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    shapes.forEach(shape => {
        if (shape.type === 'rect') {
            ctx.fillStyle = shape.color;
            ctx.fillRect(shape.x, shape.y, shape.w, shape.h);
        } else if (shape.type === 'circle') {
            ctx.beginPath();
            ctx.arc(shape.x, shape.y, shape.r, 0, Math.PI * 2);
            ctx.fillStyle = shape.color;
            ctx.fill();
        }
    });
}

// Initial draw
redraw();

Key Points to Remember

• The canvas does not inherently know about drawn content — you must track objects and their positions.
• Always use getBoundingClientRect() for accurate mouse positioning.
• Redraw the canvas after state changes (like dragging).
• For better performance with many objects, consider spatial indexing (like quadtrees) for hit detection.
• Touch events require similar handling using touchstart , touchmove , etc., with touch coordinates.

Basically, you're building interaction logic from scratch, but once set up, it gives you full control over 2D graphics interactions.

The above is the detailed content of How to handle mouse events on an HTML5 canvas?. For more information, please follow other related articles on the PHP Chinese website!