Group confetties by color to optimize canvas drawing

loonywizard / js-confetti

JS Confetti library that supports emojis 🦄 🎉 ⚡️

https://loonywizard.github.io/js-confetti/

MIT License

1.12k stars 47 forks source link

Closed loonywizard closed 3 years ago

loonywizard commented 3 years ago

Group confetties by color to optimize canvas drawing, batch same-color confetties drawing togheter

loonywizard commented 3 years ago

Well, I have tested performance by measuring FPS while calling addConfetti method every 100ms and here is the result

Setting ctx.fillStyle only 8 (number of colors) times instead of +1000 (number of confetties on the screen) doesn't have any performance impact
Using ctx.moveTo (while having less beginPath / fill calls) slowers FPS in 2 times in my tests