Hola, estoy tratando de crear un círculo cuyo lienzo en la cámara se alimenta para colocar la cara correctamente. Ejemplo :

Luego muestro un bloque más justo encima del texto de la cara para mostrar el mensaje de éxito/fracaso.

Esto funciona perfectamente bien en dispositivos Android pero en iOS tan pronto como coloco un bloque absoluto sobre este lienzo. Se vuelve completamente blanco, se ignora la opacidad y el área recortada donde muestro la cara también se vuelve blanca. Como esto :

Solo me enfrento a este problema en iOS Safari y Chrome.

 var ctx = canvas.getContext('2d'); ctx.fillStyle = '#e6e6e6'; ctx.fillRect(0, 0, 300, 300); ctx.globalCompositeOperation = 'xor'; ctx.beginPath(); ctx.ellipse( ctx.canvas.width / 2, ctx.canvas.height / 2, ctx.canvas.width / 2.8, ctx.canvas.height / 2.2, 0, 0, 2 * Math.PI ); ctx.stroke(); ctx.strokeStyle = 'black'; ctx.lineWidth = 3; ctx.clip(); ctx.fill();

¿Alguien puede ayudarme con lo que está mal aquí y por qué iOS se comporta de manera diferente?