title: How to detect shapes and area on an image
body: <p>I am currently working on something like kik/messenger code, just for fun.</p>
  
  <p>At this point, I create the code with Javascript in Canvas. The result is the following :</p>
  
  <p><a href="https://i.stack.imgur.com/FgEmA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FgEmA.png" alt="This is the result for the code"></a></p>
  
  <p>So my question is the following one :
  How can I detect shapes and area of shapes? Specially area. I saw articles about some solution in Python with OpenCV but I'm not sure about how to implement them :/.</p>
  
  <p><strong>[BONUS]</strong> : If you can tell shapes location you'll have my entire respect and admiration! Something like this :
  <a href="https://i.stack.imgur.com/03eix.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/03eix.jpg" alt="Number"></a></p>
  
  <p>Thank you a lot!</p>