Introduction to the event handling of HTML5 Canvas

DOM is a very important part of the web front-end field. Not only will DOM be used when processing HTML elements, but also graphic programming. For example, in SVG drawing, various graphics are inserted into the page in the form of DOM nodes, which means that the graphics can be operated using the DOM method. For example, if there is an element <path id=p1>, you can directly use jquery to add click event $('#p1').click(function(){…}). However, this DOM processing method is no longer applicable in HTML5 Canvas. Canvas uses another set of mechanisms. No matter how many graphics are drawn on Canvas, Canvas is a whole. The graphics themselves are actually part of Canvas and cannot be obtained separately, so it is impossible to directly add JavaScript events to a certain graph.

In Canvas, all the graphics are drawn on the frame. The drawing method will not output the drawn graphics elements as a return value, and js cannot obtain the already drawn graphics elements. for example: