Manipulation des pixels d'un canvas : c'est beau mais c'est lent

J'ai une passion pour les cartes et leur esthétique. Avec mon projet maposaic.com, je transforme le canvas d'une carte de Mapbox en une mosaïque en couleur.

Cependant, mon algorithme parcourt tous les pixels du canvas, ce qui prend beaucoup de temps : plus de 2 secondes pour faire un rendu de carte sur un écran fullHD. J'ai commencé à explorer l'API WebGL pour accélérer le rendu.

Les apprentissages que je voudrais vous partager pendant ce talk :

• comment transformer un canvas via l'interface ImageData
• performance d'un rendu sur un canvas vs. un rendu SVG
• comment améliorer l'expérience utilisateur avec un Worker (sur un projet webpack + react + typescript)
• OpenGL/WebGL : comment améliorer la performance de mon site en utilisant l'API WebGL

A la fin de ce talk vous connaîtrez les bases qui permettent de modifier un canvas dans un projet web. Vous saurez pourquoi les rendus WebGL sont beaucoup plus performants qu'un algorithme qui itère sur tous les pixels.