title: Is there a native way to address a non-rectangle object on canvas in js?
body: <p>I've created a grid of several distorted rectangles made with Bezier curves. Each rectangle has its own color on the picture.</p>
  
  <p>Let's say, I want to add hover effect for each of these rectangles, therefore I need to know its dimensions. Since I can fill or stroke the figure I assume that there is some way to get them, but I'm not sure.</p>
  
  <p>Here is the example of the rectangles:</p>
  
  <p><a href="https://i.stack.imgur.com/eO9zH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eO9zH.png" alt="enter image description here"></a></p>
  
  <p>So the question is, is there some method in the canvas API with which I can achieve the desired effect?</p>