I have currently two circles in a <canvas> tag with HTML5 & JavaScript.

Now I'm trying to add an image (done) that changes based on mouse-over and click.

It's basically an implementation of a play / pause button with an extra color change when the user mouse-overs the button.

I can't seem to figure out how events work on shapes in HTML5 since they are not objects ... Here is my code at the moment :

window.onload = function() {

      var canvas = document.getElementsByTagName('canvas')[0];
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;


      //Outer circle
      context.beginPath();  
      context.arc(centerX, centerY, 150, 0, Math.PI * 2, false);
      context.fillStyle = "#000";
      context.fill();
      context.stroke();

      //Inner cicle
      context.beginPath();
      context.arc(centerX, centerY, 75, 0, Math.PI * 2, false);
      context.fillStyle = "#fff";
      context.fill();
      context.stroke();

      //Play / Pause button
      var imagePlay = new Image();
      var imageHeight = 48/2;
      imagePlay.onload = function() {
        context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight);
      };
      imagePlay.src = "images/play.gif";

}

1. How to handle events on shapes created with <canvas>?

2. How to clean-up / remove images on the <canvas> when replacing it with another one?

I have currently two circles in a <canvas> tag with HTML5 & JavaScript.

Now I'm trying to add an image (done) that changes based on mouse-over and click.

It's basically an implementation of a play / pause button with an extra color change when the user mouse-overs the button.

I can't seem to figure out how events work on shapes in HTML5 since they are not objects ... Here is my code at the moment :

window.onload = function() {

      var canvas = document.getElementsByTagName('canvas')[0];
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;


      //Outer circle
      context.beginPath();  
      context.arc(centerX, centerY, 150, 0, Math.PI * 2, false);
      context.fillStyle = "#000";
      context.fill();
      context.stroke();

      //Inner cicle
      context.beginPath();
      context.arc(centerX, centerY, 75, 0, Math.PI * 2, false);
      context.fillStyle = "#fff";
      context.fill();
      context.stroke();

      //Play / Pause button
      var imagePlay = new Image();
      var imageHeight = 48/2;
      imagePlay.onload = function() {
        context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight);
      };
      imagePlay.src = "images/play.gif";

}

1. How to handle events on shapes created with <canvas>?

2. How to clean-up / remove images on the <canvas> when replacing it with another one?

• javascript
• html
• canvas
• dom-events

5 Answers 5

There is technically no way to register mouse events on canvas-drawn shapes. However, if you use a library, like Raphael (http://raphaeljs./), it can keep track of shape positions and thus figure out what shape is receiving the mouse event. here's an example:

var circle = r.circle(50, 50, 40);

circle.attr({fill: "red"});

circle.mouseover(function (event) {
    this.attr({fill: "red"});
});

As you can see, it's very simple this way. For modifying shapes, this library will also e in handy. Without it you would need to remember how to redraw everything each time you make a change

Well The simple answer is you can't. You either will have to find the coordinates of the click event and calculate whether you want to perform an option or not or you can use area and map tags and overlay the canvas element with it. To change a canvas use the clearRect function to draw paint a rectangle over everything and then redraw what you want.

1. There is no "built-in" way of keeping track of shapes drawn on the canvas. They are not treated as objects, but rather just pixels in an area. If you want to handle events on shapes drawn on the canvas, you would need to keep track of the area each shape covers, and then determine which shape you're triggering the event for based on the mouse position.

2. You can just draw over other shapes if you want to replace it with something. You might want to take a look at globalCompositeOperation.

If you want to treat your drawings as objects, I would remend using SVG instead of canvas.

Another option is to use buttons, and then style them using CSS.

Basically, what you're doing now really wasn't the intended purpose or use of the canvas. It's like using a pencil to hammer in nails - you're using the wrong tool for the job.

While it's true that you cannot create click events for objects drawn on the canvas there is a workaround: Wrap the canvas in a DIV tag and then add the images within the DIV tag above the CANVAS tag.

<div id="wrapper">
    <img src="img1.jpg" id="img1"></img>
    <canvas id="thecanvas"></canvas>
</div>

Then use CSS to make the images position:absolute and use left:*px and top:*px attributes to place the image over the canvas where you would have normally drawn it.

#img1{
position:absolute;
left: 10px;
top: 10px;
 }

You can then add click events to the image which is placed over the canvas giving the impression that you are clicking on the canvas(the below example uses the jQuery click() function)

$( "#img1" ).click(function(){
    alert("Thanks for clicking me");
});

You can cast a ray into the canvas and manually test your images for intersection with the ray. You should look at it like you press, and send a ray into the screen. You should write a

objectsUnderPoint( x, y );

function that returns an array of all the images that intersect with the ray at x, y.

This is the only real right answer, and this is how it is usually done in 3D engines as well.