Home/ Questions/Q 788685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:24:23+00:00

How can I bind an event to a shape drawn on a canvas? I

  • 0

How can I bind an event to a shape drawn on a canvas? I presumed this would work but I get an error.

<html>
    <head>
    <script type="application/javascript">
    function draw() {   
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");      
        ctx.fillStyle = "rgb(200,0,0)";
        var rec = ctx.fillRect (0, 0, 55, 50);

        rec.onclick = function(){
            alert('something');
        }
    }
    </script>
    </head>
    <body onLoad="draw()">
        <canvas id="canvas" width="300" height="300"></canvas>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put the event handlers on the canvas element, and then use the mouse position to decide which conceptual part of the canvas the event is occurring on.

    I haven’t played with canvas all that much, but I wouldn’t be surprised if there were already some libraries that help you manage event delegation to such imaginary elements.

    • 0