Avantages et inconvénients des deux technologies

Il y a deux grosses différences entre <canvas> et <svg>.

Lorsqu’un dessin est fait en utilisant <canvas>, l’image une fois créée n’est plus du tout accessible, c’est-à-dire que le navigateur affiche les pixels de la couleur voulue et à l’endroit voulu, mais ensuite il est impossible de programmer un pixel ou un rectangle. Le dessin une fois à l’écran est comme un grand JPG. Alors que, comme il a été vu à la section précédente, <svg> permet, une fois le dessin représenté à l’écran, d’interagir avec tous les éléments. Donc s’il y a besoin d’interactivité, <svg> est plus pratique. Il est possible de créer le même comportement avec <canvas>, mais dans ce cas il faudra détecter si la position de la souris en x est comprise entre deux valeurs, de même pour y, et ensuite exécuter une fonction. C’est donc possible mais moins pratique.

Par contre, s’il y a beaucoup d’éléments à afficher et qu’il faut que ce soit assez rapide, pour un jeu par exemple, <canvas> sera le plus intéressant car il est directement accessible par la carte graphique (le GPU : Graphics Processing Unit) qui sait surtout faire des calculs très rapidement pour l’affichage. Vous pouvez en voir un exemple à l’adresse ...