How to detect shapes and area on an image
<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>