Thanks! Yes, you are right. Whitelist or blacklist option is a good idea

I simply loved the examples on paper.js webpage and just wanted to try it

Actually I made a switch at first as I started with Two.js and there are 3 types (svg, canvas and webgl). But then there was Paper.js which only had simple canvas so I removed the switch at all and used the fastest renderers for every engine (webgl or canvas).

I wasn't thinking about this as a menu, this are just links to switch between renderers. Count saving is a good point, I'll add this feature

I made a change to loops to use for() cycle, thanks

Good point. Usually I like to use map or reduce for arrays but here simple for is easier.

My point was more to compare libraries than to create the best canvas performance. But you are right: simple plain canvas is usually pretty fast.

Yeah, by default it's accelerated anyway, at least if depending on browser and hardware. So, at least for something as basic as drawing a lot of things with the same color, engines and additional code can only make it slower.

Generally speaking, avoid GC, and avoid setting state that's already set... if you do these two things and use engines that do these two things, it's usually going to be more than fast enough :)

Its nice if you can avoid creating new objects, but in recent optimization I've seen no difference between reusing objects vs immutable objects. Removing unnecessary code is always nice though.

What might be more interesting is drawing performance of images. And yes, a comparison with plain old canvas would be nice too.

WebGL is the fastest for now. But not all libraries and browsers support it

WebGL 1 support in the wild is roughly 97% and WebGL 2 is 54% based on stats collected from a number of participating sites. https://webglstats.com/

Yes, I agree. I also found out that Two.js redraws 5k elements even a little bit faster but it takes a couple of seconds to render them for the first time.