1

I have wasted countless hours trying to figure out why my Canvas wasn't properly drawing the data from my Video element using the drawImage function.

The following snippet is what I had initially attempted, in an effort to merely output the exact video output to my canvas:

this.canvasContext.drawImage(this.mainVideoElement, 0, 0);

However, this only outputted a small rectangle of the top left of my Video element's current content. I then attempted all sorts of variations of the parameters defined in the drawImage documentation, and even after manually defining my heights/widths, the result in my Canvas was significantly (at least 5-10x) lower resolution than the Video content.

Shane Duffy
  • 1,117
  • 8
  • 18

1 Answers1

1

To my dismay, this entire problem came from the fact that I was setting my Canvas size using 'px' units in my css file. Upon setting the width and height directly in the html definition, it began behaving properly and outputting high resolution again.

Apparently, using 'px' units completely breaks Canvas behavior with regard to the drawImage function. I'm too tired to look into this further, but if your drawImage is misbehaving, make sure you are defining your canvas sizing directly in your html, using the width and height properties.

Edit: Alternatively, I found that you can use CSS to set your canvas sizing. Just make sure that you do the following in your JavaScript before calling drawImage:

this.mainCanvasElement.width = this.mainCanvasElement.clientWidth;
this.mainCanvasElement.height = this.mainCanvasElement.clientHeight;
Shane Duffy
  • 1,117
  • 8
  • 18