The canvas element is distorting my image and zooming in to the middle left. As seen here.

https://i.ibb.co/ZMCcM88/Screenshot-116.png

The above is what it should look like, the bottom is how its coming out.

My console.log() shows the video and canvas sizes are equal and nothing should be distorted or coming out wrong.

https://i.ibb.co/p0cHDXf/Screenshot-118.png

My code looks like this

Template

<div>
  <video ref="video" class="full-width" autoplay playsinline >
  <canvas ref="canvas" class="full-width" height="240" >
</div>

Script

export default defineComponent({
  name: "CameraPage",
  setup() {

    const imageCaptured = ref(false);
    const video = ref(null);
    const canvas = ref(null);

    const initCamera = () => {
      navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((stream) => {
          video.value.srcObject = stream;
        });
    };

    const captureImage = () => {
      canvas.width = video.value.getBoundingClientRect().width;
      canvas.height = video.value.getBoundingClientRect().height;
      let context = canvas.value.getContext("2d");
      context.drawImage(video.value, 0, 0, canvas.width, canvas.height);
      imageCaptured.value = "True";
    };

    onMounted(() => {
      initCamera();
    });

    return {
      initCamera,
      onMounted,
      captureImage,
      video,
      canvas,
      imageCaptured,
    };
  },
});

What am I doing that's distorting the image? Am I getting something in the drawImage() method thats wrong? Is it the "full-width" and "height" in the canvas html attributes?

I just want to "take a screenshot" of the streaming video and make it look like a photo basically.

Im so close but so far away.