There is the possibly of a new hit region api in canvas that can be used as a way to define additional interactivity for objects that are drawn in a canvas. As of this writing there is very poor browser support for this, in fact it does not seem to work at all in any browser that I use at least. However there are other ways of doing this when it comes to just working gout my own methods, and finding things on line that have to do with bounding box collision detection and other ways of doing such a task.
In addition I think it might be worth mentioning that I do have the source code for what I am writing about here also up on my test_vjs repository in github. That would be the place to go to see what might be coming up next when and if I get around to editing this post. Also if you want to make a pull request because you see something wrong you might want to do it there.
I do not think that a hit region area should really be the responsibility of a canvas drawing api any way, and that a canvas element does not need to be a replacement for other HTML elements. Sure the subject will come up often, but hit detection should be a part of the class, model, framework or whatever it is that you are using outside of just the canvas element and the drawing api alone.
One way to make it so you have a hit area in the canvas is to use a basic bounding box collision detection method. This kind of method should be a part of a framework that you are using, if you are just going vanilla js style though you could start out with just something like this maybe.
A method such as this can be used to find out if one box area overlaps another, and can then be used in conjunction with many other methods and objects to create, and mutate a state. That state then just needs to be rendered to the canvas.
Now that I have covered how to have a simple bounding box collision detection method, I can now use that to make it so that when an area of the canvas is clicked that results in some kind of action. In this section I have an example that uses the bounding box method to know that an area is clicked and when such an area is click I cycle over some indexed color values for that area. In other words when the area is click it changes color, not the most interesting example, but it is a start when it comes to this sort of thing with canvas.
So at the top of my script I have my bounding box method that I covered in the first section, then I have my get canvas relative position method. I will not be getting into this method in detail here as I have wrote a post before hand on this topic, but this method just helps me get a canvas rather than window relative position when inside the body of an event hander for a mouse event, if you want to read more about this you can read the post on getting a canvas relative pointer position.
I then have a method that can be used to create an event hander for the object that I will be using to define the area in the canvas. This method excepts the area object as the first and only argument, and then returns an event hander that is intended to be used when attaching such an event hander to a canvas element using the add event listener method. The event hander that is returned will use the get canvas relative method to get a position relative to the canvas, and then attach width and height values that are 1 by 1 to the object and use that as an argument, along with the area object when calling the bounding box method. In the event that the bounding box method returns true, then a click method of the area object will be called.
I then of course have a draw method that will take a 2d drawing context, and this area object and render everything to the canvas. For this example I have just one main draw method as I am trying to keep things simple for now, but in a real project I would break this method down, and start to form something that is a separate draw module rather than just a single method pack together with everything else.
I can not say that this is the best way to go about setting up some buttons in a canvas project, but you get the general idea. A hit detection method can be used to find out of an object was clicked or not, and then some kind of action can be preformed. In a real project I might go about pulling code like this into a module of sorts, and also make the objects a little more flashy by doing all kinds of things other than just changing color, and stepping a click variable.
So this is not really an end point in development for several reasons. When it comes to making a game a functional approach might not always be a such a great idea because of the performance loss from cloning objects with certain methods that will not mutate in place. Also when it comes to a real project I am likely going to need this to do a bit more than just creating box objects, bounding box collision detection, and moving a box by a heading and delta. Still for just the sake of canvas hit areas this alone will do the trick.
So then I will want a draw.js file that can be used to draw a box object to a canvas element. In addition I will place any additional draw methods hear that I will want to use from a project in general. For now I am just pulling the process of drawing a plain background into its own methods, but if this where to grow into something more this module would have a lot more going on.
Once I have my reference to the canvas element, and the 2d drawing context, I create a box that will serve as a player object. I also created a collection of box objects that compose a pool of these objects that will be set at various areas of the canvas element. I also have a method that will loop over all of the boxes in the pool object and call a git check method for all of the obejcts in the pool with respect to the current values of the player object that will be in motion.
So then the player object moves around the canvas in a circle by making use of the move by heading method, and when it moves over a box in the pool that hit check method for that box will fire each time until the player object is not over it anymore. When the hit check method is called a secs value that is the amount of time that is passes sense the last update is available in the body of the hit check method. This secs value is used to add an amount of damage to the pool object based on that secs value and the Damage Per Second value of the player object.
Now all I need is a little html to tie this all together.
So this turned out to be a fun little project that just shows off the use of the bounding box method as a way to find out if a display object is getting hit or not. If I get some more time at some point I might add all kinds of additional features to this one to make it a little more interesting. However I have a lot of other projects that I want to get to, so do not hold your breath on that one. In the mean time you might want to check out my canvas examples that are examples of full canvas projects rather that just simple little demos like this.
So for the most part I try to just stick to bounding box collision detection if I can. With some projects I might just have to use something more advanced, but often doing so often will eat up more resources. Bounding box collision detection is very simple and to the point with this, and it will not eat up as much over head as a more pixel perfect solution would.