The last month we have taken a new approach on canvas capturing. The previous method we used, although it had a minimum performance impact on canvas rendering, had one significant drawback; the frame rate at which each canvas was captured was inversely proportional to the canvas size. As a result, big canvas elements where captured at a low frame rate.

This led us on re-writting the whole canvas capturing part using a self-adaptive method. Now, all canvases are captured at a constant rate of about ~2fps. In the interest of not hurting the canvas rendering performance that much, the recorder benchmarks the canvas capturing phase and depending on the outcome, drops or increases the capture quality accordingly.

The capture quality is the maximum frame size which is constantly auto adjusted between 320p and 1024p. If any dimension (width or height) of your canvas exceeds the current maximum frame size, then the canvas frame is resized by retaining the canvas aspect ratio. The image quality is constant across all frame sizes and set to 0.25.

Our tests, using mid-range hardware, show an average frame rate penalty of 5% up to 18% depending on the canvas size, context type and use case. See the recording below and notice how the image quality drops as the playback moves ahead:


As a bonus feature the new recorder (versions 1.1.1 and above) now supports capturing WebGL canvases! Here is a sample recording from webglsamples.org:


Of course there is always space for improvement, but we believe this is a valid step ahead. As always, we would be glad to hear how this new enhancement works for you.