Accueil

L'API Canvas

Ci-dessous une animation réalisée avec Canvas : une instruction HTML pour dessiner une zone de dessin vierge dans la page et un script basé sur les fonctions de l'API Canvas. Votre navigateur ne supporte pas Canvas !

Intérêt de Canvas

Dessiner dans la page avec Canvas c'est écrire un peu de HTML et de CSS (définir le canevas : dimensions et stylage de la zone de dessin).
Mais c'est surtout écrire un script. En effet remplir de formes géométriques la zone de dessin vide c'est l'affaire du JavaScript et plus précisément des méthodes et propriétés de l'objet Canvas.
Attention une image produite par Canvas perd de la qualité lorsqu'elle est étirée puisqu'il s'agit d'une image matricielle mais vous verrez que le rendu peut être tout à fait correct à condition de prendre quelques précautions ...
La bibliothèque Canvas est désormais implémentée par tous les navigateurs récents.

Attention pour aborder ce tuto sur Canvas avec profit vous devez connaitre les bases du JavaScript : variables, conditions, boucles, fonctions, etc.
Si ce n'est pas le cas visitez - dans le même site - le tuto sur : JavaScript & jQuery

Inconvénient de l'API Canvas : pour que le dessin s'affiche il faut bien sûr que JavaScript soit activé par le navigateur or sur les terminaux des entreprises, pour des raisons de sécurité, JavaScript est parfois bloqué. Donc je vous conseille d'utiliser la balise NOSCRIPT (voir le tuto de JavaScript & jQuery) pour avertir éventuellement le visiteur qu'un script est bloqué.

Ci-dessous une belle balustrade dessinée avec avec l'API Canvas :

Le code HTML correspondant c'est une instruction et quant au script il fait : 8 lignes. Voir ci-dessous ce script :

	var canevas2= document.querySelectorAll('canvas')[1]; 
	var contexte2 = canevas2.getContext('2d');
	var colonne = new Path2D("M 0,20 h120 v30 h-20 c-30,60 50,140 0,200 
		h20 v40 h-120 v-40 h20 c-50,-60 30,-140 0,-200 h-20 v-30 z");
	contexte2.fillStyle ="gray";
	contexte2.fill(colonne);
	for (i=1; i<=6; i++)
		{
			contexte2.translate(120,0) ; // déplacement colonne suivante
			contexte2.fill(colonne);
		} // fin for 
	

Vous n'y comprenez rien. Lisez donc les pages du tuto !
Ceux qui connaissent, noterons que le chemin est exprimé en relatif ; ce qui est beaucoup plus simple.

Sommaire de ce tuto