Unable to positioned the webgl canvas while capturing image

I'm accessing the webcam and trying to take a picture. this is what it looks like before capturing the pic.

But this is what I'm getting after taking the picture.

Mask is the canvas and Someone helped me detecting the face to put mask on it but whn i capture it doesn't capture as expected.

here's the code when i click the snap button

  const glCanvas = document.getElementById('faceCanvas') as HTMLCanvasElement;
    const webglContext = glCanvas.getContext('webgl', {
      preserveDrawingBuffer: true,
    });
    const canvas2d = document.getElementById(
      'faceCanvas2'
    ) as HTMLCanvasElement;
    canvas2d.width = 1400;  
    canvas2d.height = 1400;  
    const ctx = canvas2d.getContext('2d');
    ctx.drawImage(glCanvas, 0, 0);
    ctx.drawImage(this.video.nativeElement, 0, 0); 

    const image = canvas2d.toDataURL('image/png');

Here's the Html code

<div class="main" style="overflow: hidden; position: relative">
  <div class="ar">
    <video #video muted id="webcam" class="visible"></video>
    <canvas
      #faceCanvas
      id="faceCanvas"
      tabindex="1"
      style="position: fixed; z-index: 99"
    ></canvas>
    <canvas
      #faceCanvas2
      id="faceCanvas2"
      tabindex="1"
      style="z-index: 98; position: fixed"
    ></canvas>

      <span>Webcam visible</span>
    </button>

    <a id="artist" target="_blank"> Mar flag </a>
    <button id="snap" (click)="capture()" style="z-index: 999">Snap</button> 
  </div>
</div>

if anyone can give me some pointer it would be really helpful. I've never worked on this so i'm bit lost.

from Unable to positioned the webgl canvas while capturing image