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.