4 ms·
https://jsfiddle.net/vas71r68/3/ https://jsfiddle.net/vas71r68/3/ Don't do stuff like pushing rectangles to an array to have their position wrapped, instead of
by mellow2020 6y ago
https://jsfiddle.net/vas71r68/3/ https://jsfiddle.net/vas71r68/3/
Don't do stuff like pushing rectangles to an array to have their position wrapped, instead of simply doing it right there, unless you want to test the GC.
- ncr100 6y agoLOL this looks like 60 FPS for 5000 rectangles and _no_ canvas engine .. stock. The three of the article are 10-20 FPS. (Pixelbook c0a) Correct me if I am wrong. Nice optimization.
- deleted 6y ago[deleted]
- gnykka 6y agoMy point was more to compare libraries than to create the best canvas performance. But you are right: simple plain canvas is usually pretty fast.
- mellow2020 6y agoYeah, 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 :)
- dom96 6y agoWhat might be more interesting is drawing performance of images. And yes, a comparison with plain old canvas would be nice too.
- z3t4 6y agoIts 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.