How to calculate that the cursor is "inside" a non-rectangular shape?

Question

Canvas

Let's say a rectangle, a circle and a star are drawn on the canvas. How to determine that the cursor is hovering, for example, on a star?
Let me explain why this is needed: HTML5 canvas does not allow you to work with the image "in layers", so there is no way to make some image element clickable, the element will have to be calculated relative to the position of the cursor on the canvas.
Or is it better not to worry and use SVG?
How versatile is canvas over svg? What can canvas and svg not?

Answer 1

Canvas - raster
Consumes the resources of the video processor, which makes it work very fast. Due to the fact that it is a raster, it can apply filters, capture a video frame, etc. etc. With Canvas , the WebGL library is available , which is a powerful rendering tool in its own right.
SVG - vector
Can be used directly in the DOM by inserting elements into the page. As a result, these elements are styleable with CSS and are full members of the DOM. This means that both events (such as mouseenter, mouseleave, click, etc.) and states (:hover, etc.) are available for them.
At the same time, SVG can be used as a background ( data:uri), masks in the CSS filter. As such, it is no longer available to be manipulated with CSS and Javascript.
That is, they are generally different technologies and work with them in different ways. If you need shapes with event and state handling, then SVG is definitely needed . If something powerful, dynamic, similar to images - Canvas .