Is this library using the "pre-rendering" technique?

[scottm-cc]

Hi, I saw in this canvas performance comparison that this library seems to get much better performance than the other 2d canvas libraries like Fabric and Paper.

I was curious if this is using this "pre-rendering" technique described by MDN in order to achieve this, by drawing using the context of a canvas that is not rendered in the document and then drawing it to the "real" canvas that is visible.

[KaliedaRik]

In general, SC draws everything to a hidden canvas, then copies the relevant parts of that canvas to the displayed canvas. This is to help make the element responsively fit into its environment, and also for speed.

For that specific test, I went further and pre-rendered the boxes onto another hidden canvas (buildCell()), then used Canvas API drawImage() calls to build the scene eventually output to the display canvas. This approach cuts down the number of graphical entitys kept in memory from thousands to one. The code can be found here: https://github.com/slaylines/canvas-engines-comparison/blob/master/src/scripts/scrawl-canvas.js

[KaliedaRik]

The previous answer is outdated. Latest code in the test now uses Canvas API drawing calls directly on the base canvas, which gets copied over to the visible canvas once per RAF.

SC makes directly accessing the Canvas API drawing calls easy, and handles all the base/visible canvas copying automatically. The only edge case to watch out for using this approach is when a user drags the browser window between screens with different pixel densities