Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bind event to shape on canvas

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>
like image 601
Ben Shelock Avatar asked May 09 '10 15:05

Ben Shelock


2 Answers

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.

like image 117
goat Avatar answered Oct 09 '22 08:10

goat


Using Kineticsjs, you can handle shape events in a canvas as follows:

<script>
  shape.on('mousedown mouseover' function(evt) {
    // do something
  });
</script>
like image 20
Pith Avatar answered Oct 09 '22 09:10

Pith