- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Updated on 04-Mar-2020 06:13:50
- 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 large font on HTML5 Canvas?
- How to draw a rectangle 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
Advertisements