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

Published on 21-Mar-2018 07:59:32

• Related Questions & Answers
• How to prevent text select outside HTML5 canvas on double-click?
• How to draw a dot on a canvas on a click event in Tkinter Python?
• Mouse event not being triggered on HTML5 canvas? How to solve it?
• How to bind a click event to a Canvas in Tkinter?
• How to use images with HTML5 canvas?
• How to implement click event on toolbar icon?
• How to detect point on canvas after canvas rotation in HTML5
• How to draw a rectangle on HTML5 Canvas?
• How to draw large font on HTML5 Canvas?
• HTML5 Canvas Font Size Based on Canvas Size
• Why to use canvas tag in HTML5?
• How to call a JavaScript function on a click event?
• How to draw a quadratic curve on HTML5 Canvas?
• addEventListener for keydown on HTML5 Canvas
• Update HTML5 canvas rectangle on hover