What are the most preferred practices for building an interactive canvas?

Question

JavaScript

Hello. I'm using the Canvas Web API to create a bar chart widget.
I analyzed this example through ChromeDevTools.
Basically, the device understood, the only question left is how is the clickable legend implemented, through the canvas context, by calling the functions of the CanvasRenderingContext2D object, or by overlaying HTML elements like "div" and "g"?
In general, what are the most preferred practices for building an interactive canvas?

Answer 1

• Check manually if the cursor is inside the rectangle.
  
• Canvas Hit Regions, which is currently flagged in Chrome and Firefox.
  
• But SVG is the best for this.