title: Converting image taken from camera to canvas has gray on the side
body: <p>Im using vanilla javascript to capture images from the camera and into the canvas.  Its working fine on Chrome Android but not in iOS Safari.  As seen in the screenshot, there is a gray area on the image.  Is there something I need to do to not get that rendered?  </p>
  
  <p><strong>JavaScript for the camera</strong></p>
  
  <pre><code>navigator.mediaDevices.getUserMedia({
      'audio': false,
      'video': {
          facingMode: 'environment'
      }
  }).then(stream =&gt; {
      this.VIDEO.srcObject = stream;
      this.VIDEO.addEventListener('loadeddata', async () =&gt; {
          this.VIDEO.width = this.VIDEO.videoWidth;
          this.VIDEO.height = this.VIDEO.videoHeight;
          this.CANVAS.width = this.VIDEO.videoWidth;
          this.CANVAS.height = this.VIDEO.videoHeight;
          resolve();
      }, false);
  }).catch(error =&gt; {
      console.error(error);
      self.MESSAGE.textContent = error;
  });
  </code></pre>
  
  <p><strong>JavaScript for drawing on the canvas and the preview window</strong></p>
  
  <pre><code>self.CONTEXT.drawImage(self.VIDEO, 0, 0, self.VIDEO.width, self.VIDEO.height);
  
  let imgDataURL = self.CANVAS.toDataURL('image/png');
  self.PLANT.src = imgDataURL;
  self.POLAROID.style.backgroundImage = `url(${imgDataURL})`;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/RMqpV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RMqpV.jpg" alt="enter image description here"></a></p>