Comment vous l'aurez constaté, l'élément <canvas> met à disposition des fonctions d'assez bas niveau : chemins, formes, arcs, images, dégradés, pour arriver à une mise en scène complexe il faut faire preuve de persévérance et maîtriser les calculs en JavaScript... en attendant la démocratisation d'outils tout-en-un pour générer le code attendu. L'accélération matérielle des navigateurs promet de belles réalisations toujours plus époustouflantes. Canvas n'est pas figé et va encore évoluer pour être doté d'autres méthodes de dessin.
Et l'animation ?
Ce tutoriel n'ayant abordé que le contexte 2D "statique", il faut bien l'avouer : les démonstrations les plus époustouflantes présentées restent celles axées autour des possibilités d'animation et d'interaction (clavier/souris/manettes voire webcam), en combinaison avec JavaScript. Ceci sera abordé dans d'autres articles, car le sujet est extrêmement vaste. La partie "3D" fait appel à WebGL, déclinaison d'OpenGL pour le web qui est aussi un sujet bien spécifique réclamant de solides compétences en programmation 3D.
Frameworks et bibliothèques
Pour gagner en efficacité et en temps de développement, une des meilleures solutions reste de faire appel à des frameworks bien pensés. Ceux-ci contiendront un ensemble de fonctions de plus haut niveau (faisant appel bien sûr à celles de Canvas) pour produire plus rapidement un résultat, facilité la manipulation des pixels, des formes, et surtout l'animation. Voici quelques bibliothèques célèbres :
Références et documentation
N'oubliez pas de consulter aussi les tutoriels suivants sur une autre manière d'aborder la 2D dans le navigateur : en vectoriel avec SVG.
Commentaires
C'est en effet une restriction de sécurité : il faut utiliser les ressources du domaine qui héberge déjà la page (afin de ne pas extraire les informations d'un domaine tiers). Donc localhost peut fonctionner pour les tests (plutôt qu'une adresse IP, ou un accès via file:// qui ne permet pas d'appliquer une règle de sécurité propre à un domaine).
Merci pour ce tuto qui va à l'essentiel.
Même 6 ans après sa création, il me semble toujours d'actualité.
Peut-être une petite coquille dans la partie 7 :
"...createImageData(100,100) devra stocker l'information de 1000 pixels ce qui produira un tableau à 4000 valeurs."
100 * 100 = 10 000, donc 40 000 valeurs