Hi I am trying to create a circle which canvas on camera feed to position face correctly. Example :

Then I display some more block just above face text to show success/failure message.

This works perfectly fine on Android Device but on iOS as soon as i place an absolute block over this canvas. It turns complete white, opacity is ignored and clipped area where i am showing face also turn white. Like this :

I am only facing this issue on iOS Safari and 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();

Can anybody help me with what's going wrong here and why iOS is behaving differently ?