'How to know if the user's face/boundry box is within an ellipse in a canvas
I'm working on application the make checks for a user in front of camera, I used the FaceApi to detect the face and draw a bounding box arround it. I want to make sure that face/bounding box is within an ellipse(an svg). Basically, I think I will compute the intersection between the bounding box and the ellipse. And let the check passes only if the intersection is above a predefined threshold(say 0.5, the half part of the face is within the ellipse).
<svg
width="100%"
height="100%"
className="svg"
viewBox="0 0 260 200"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
<ellipse id="ellipse-mask" cx="50%" cy="45%" rx="60" ry="85" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7"/>
</svg>
is there any way to compute/know the area of the ellipse to use it to compute the intersection with the bounding box arround the face detected with Javascript ?
Any help of advice will be appreciated. Thank you.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

