Jank and generally poor quality of WebM Output.

datermine commented 5 years ago

I'm trying to record someone drawing on a canvas. To that end I've attempted to combine Fabric.js (http://fabricjs.com/) with CCapture.js.

I'm close to getting this right, but right now I have the following issues:

The output has all kinds of anti-aliasing artifacts. Frames do not look like the canvas rendered on the page.
The framerate of the video is low. As a result, it's pretty choppy.
The total duration doesn't match the time spent drawing.

CodePen to demonstrate my issue: https://codepen.io/anon/pen/vbQraM?editors=1000

Also, see attached video file. hi.plus.squiggle.webm.zip

Any thoughts on what I might be doing wrong?

Thanks, George

PS. I was also looking at this: https://codepen.io/luckyboy07/pen/VXpyQw

datermine commented 5 years ago

To make understanding this easier to consume, here are two screenshots of the canvas vs. the WebM outoput.

vs.

josedotjs commented 5 years ago

Hi, by default fabric js makes a transparent background, add the line canvas.setBackgroundColor('#fffff'); and the background is correctly rendered https://codepen.io/anon/pen/LvOQJz

spite / ccapture.js

Jank and generally poor quality of WebM Output. #94