Canvas Images and Click Event

Question

I currently have two circles in the <canvas> with HTML5 and JavaScript.

Now I'm trying to add an image (made) that changes depending on the mouse and click.

Basically this is an implementation of the play / pause button with an additional color change when the user clicks the mouse button.

I can’t understand 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 using <canvas> ?

2) How to clear / delete images on <canvas> when replacing it with another?

Thanks in advance!

Answer 1

It is technically impossible to register mouse events on figures made on canvas. However, if you use a library such as Raphael (http://raphaeljs.com/), it can track the position of the figure and thus determine what shape the mouse event takes. here is 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 is very simple. This library is also useful for changing shapes. Without this, you will need to remember how to redraw everything every time you make changes.

Answer 2

Well, the simple answer is you cannot. You will either need to find the coordinates of the click event and calculate whether you want to execute the parameter or not, or use the area and map tags and apply a canvas element to it. To change the canvas, use the clearRect function to draw a rectangle over everything and then redraw what you want.

Answer 3

• There is no “built-in” way to track shapes drawn on canvas. They are not considered as objects, but simply pixels in the area. If you want to handle events on shapes drawn on canvas, you will need to track the area covered by each shape, and then determine which shape you are triggering the event, depending on the position of the mouse.

• You can simply draw other shapes if you want to replace something. You can take a look at globalCompositeOperation .

If you want to treat your drawings as objects, I would recommend instead of SVG

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

Basically, what you are doing now was really not the purpose or use of the canvas. It is like using a pencil to hammer in nails - you are using the wrong tool for the job.

Answer 4

Although 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 in 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 image position: absolute and use the left: * px and top: * px attributes to place the image on top of the canvas where you usually painted it.

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

Then you can add click events to the image that is placed on top of the canvas, creating the impression that you click on the canvas (in the example below, the jQuery click () function is used)

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

Answer 5

You can lay the beam on the canvas and manually check your images to intersect the beam. You must look at it as you press, and send a beam to the screen. You have to write

 objectsUnderPoint( x, y ); 

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

This is the only real correct answer, and this is usually done in 3D engines.