How to use multiple click event on HTML5 canvas?

When there is a circle drawn on canvas and we put red color on half and grey color on a portion of a circle, then on clicking a red color, we call function1.

On clicking grey part, function 2 is called and we need to use reusable path objects to store different parts, which we want to test. Click handler can be used to share the canvas and do our desired work. Path2D objects can be used to store path information.

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 checking is performed for clicks on common canvas with x and y-axis
Then path array is iterated to test each path for hits.

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

usharani

e

Updated on: 04-Mar-2020

256 Views

Kickstart Your Career

Get certified by completing the course

Get Started