Canvas Engines Comparison

https://benchmarks.slaylines.io/

Description

• Up to a million different rectangles moving on a canvas with various speed
• Different choice of libraries used to render the scene :

	module kb
PixiJS
Mesh.js
P5.js
ZRender
Two.js
Konva.js
CanvasKit
Pencil.js
Paper.js
Fabric.js
Three JS
Scrawl-canvas
Pts
EaselJS
SVG.js
Next2D

Thanks to KaliedaRik for the (highly unscientific) comparison of the performance in different browsers (MacBook Pro 2019, 8k boxes):

Library	Chrome	Firefox	Safari
Pixi	60	48	24
Scrawl-canvas	56	60	40
P5	15	4	44
Mesh	47	34	18
ZRender	13	4	28
Two	23	25	16
Konva	23	7	19
CanvasKit	17	19	22
Paper	16	6	16
Easel	11	4	28
Pencil	12	3	19
Pts	12	4	13
Fabric	9	4	9
SVG	10	7	10
Three	8	7	4
DOM	17	1	11
Raw JS	19	19	39

Pure WebGL implementation outperforms them all with 60/120 fps on modern hardware (2023 laptop/tablet/mobile) for 1M boxes due to GPU offload of position computations.

Quick Start

$ yarn install
$ yarn build
$ yarn start

Misc

A list of webgl libraries : https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc