How to use multiple click events on HTML5 canvas?

When a circle is drawn on the canvas and half of it is painted red and part of the circle is painted gray, when red is clicked, we call function 1.

When the gray part is clicked, function 2 is called, and we need to use a reusable path object to store the different parts we want to test. Click handlers can be used to share the canvas and do what we want. Path information can be stored using Path2D objects.

var path1 = new Path2D();
var path2 = new Path2D();

var newpaths = [path1,path 2];   // Array is needed to store paths

path1.arc(200, 85,650, -0.2 * Math.PI, 2.7 * Math.PI);  // Path for red part
path2.arc(200, 85, 60, 2.7 * Math.PI, -1.1 * Math.PI);  //Path for  grey part


// Two path objects are rendered  using a common context ctx1, but with different style
ctx1.lineWidth = 16;
ctx1.strokeStyle = "#d43030";
ctx1.stroke(path1);
ctx1.strokeStyle = "#b8b8b8";
ctx1.stroke(path2);

Then check for clicks on the common canvas using the x and y axes

Then iterate over the array of paths to test for clicks on each path.

<canvas id = "myCanvas1"></canvas> // Then it is attached with corresponding canvas.

The above is the detailed content of How to use multiple click events on HTML5 canvas?. For more information, please follow other related articles on the PHP Chinese website!