Canvas doesn't inherently support native events like clicks or key presses. Instead, event handling in Canvas revolves around interactions with the drawn content itself.

Types of Events in Canvas

1. Mouse Events: Triggered by mouse interactions within the Canvas area including clicks, movements, and scrolling.
2. Touch Events: Catering to touch-enabled devices, touch events such as taps, swipes, and pinches offer tactile experience within Canvas.
3. Keyboard Events: While Canvas doesn't directly capture keyboard events, developers can listen for keyboard input at the document or window level and respond accordingly within the Canvas context.
4. Custom Events: Tailored to specific application needs, custom events empower developers to define their own event triggers and actions within Canvas applications.

1 Mouse Events

To handle mouse events in Canvas, developers typically attach event listeners to the Canvas element and calculate mouse coordinates relative to the Canvas area. Here's a basic example:

canvas.addEventListener('mousedown', function(event) {
    const mouseX = event.clientX - canvas.getBoundingClientRect().left;
    const mouseY = event.clientY - canvas.getBoundingClientRect().top;
    
    console.log("x = " + mouseX + ", y = " + mouseY);
    // Handle mouse down event
});

Here, mouseX and mouseY would be the clicked coordinates relative to the canvas.

2 Touch Events

For touch-enabled devices, touch events provide a tactile interface within Canvas applications. Developers can listen for touch events and extract touch coordinates to respond to touch interactions effectively.

canvas.addEventListener('touchstart', function(event) {
    const touchX = event.touches[0].clientX - canvas.getBoundingClientRect().left;
    const touchY = event.touches[0].clientY - canvas.getBoundingClientRect().top;
    
    // Handle touch start event
});

3 Keyboard Events

Although Canvas doesn't capture keyboard events directly, developers can listen for keyboard input at the document or window level and incorporate keyboard interactions seamlessly within Canvas applications.

document.addEventListener('keydown', function(event) {
    const keyCode = event.keyCode;
    
    // Handle keyboard input
});