Estoy trabajando en la aplicación para realizar comprobaciones para un usuario frente a la cámara, utilicé FaceApi para detectar la cara y dibujar un cuadro delimitador a su alrededor. Quiero asegurarme de que la cara/el cuadro delimitador esté dentro de una elipse (un svg). Básicamente, creo que calcularé la intersección entre el cuadro delimitador y la elipse. Y deje que la verificación pase solo si la intersección está por encima de un umbral predefinido (digamos 0.5, la mitad de la cara está dentro de la elipse).

 <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>

¿Hay alguna forma de calcular/conocer el área de la elipse para usarla para calcular la intersección con el cuadro delimitador alrededor de la cara detectada con Javascript?

Cualquier ayuda de consejo será apreciada. Gracias.