Canvas : intérêt de superposer plusieurs zones de dessin

Problématique

Ci-dessus une animation réalisée en superposant trois canevas !

Si vous avez déjà utilisé des logiciels de dessin tels Gimp ou PhotoShop ou encore Inkscape vous connaissez la notion de calques.
Et vous savez qu'il est possible de réaliser un dessin complexe à partir de plusieurs calques relativement simples.
Dans cette page on superpose trois zones de dessin CANVAS. Chaque canevas faisant fonction de calque.

Le code de cette page

Je pense que vous avez compris l'intérêt ici d'utiliser trois canevas : un code JavaScript beaucoup plus court.

Donc le script aurait été lourd ...

Alors qu'en utilisant trois canevas (un pour le fond, un autre pour le décor et un dernier pour l'animation) je n'ai à dessiner qu'une fois pour toute le décor.

Le code de la page

Examinons d'abord la feuille de style interne.

La feuille de style

		body {position :relative ;}
		canvas {position : absolute ; width : 80% ; height : auto ; left : 10%;}
		div {position : absolute; width : 100%; left : 0px; top : 400px; }
	

Pour que les éléments canvas se superposent parfaitement ils doivent être positionnés en absolu.
Or la largeur de chaque canevas dans son conteneur n'est pas 100% mais 80%. Il se pose donc le problème du centrage horizontal d'où la règle left : 10%.
Je rappelle que le positionnement absolu s'effectue par rapport au conteneur parent si ce dernier est lui-même positionné (en absolu ou relatif) d'où la règle "body {position : relative;}".

Le code HTML

<canvas id ='canevas1' style = "background-image: url(../images/ciel_rose.jpg);"></canvas> <canvas id ='canevas2' style = "background-image: url(ville2.svg); background-size :cover;" ></canvas> <canvas id ='canevas3' ></canvas>

Le premier canevas a pour "background" une belle image matricielle.
Le deuxième canevas a pour "background" une image vectorielle que j'ai réalisé avec le logiciel Inkscape.
Le troisième canevas contient l'animation : déplacement d'un camion sur la route.

Les attributs width & height sont toujours absents donc par défaut width vaut 300 et height vaut 150.

Le script

Il ne concerne que les premiers et troisième canevas.

		// je dessine la chaussée (rectangle grisé) dans le premier canevas
		// au dessus du superbe ciel rosé
		var canevas1 = document.querySelector('#canevas1'); 
		var contexte1 = canevas1.getContext('2d');
		var X = canevas1.width ; 	// vaut 300
		var Y= canevas1.height ; 	// vaut 150
		contexte1.fillStyle = "gray";
		contexte1.fillRect(0,120,X,30) ; 
					
		// déplacement du camion dans troisième canevas
		var canevas3 = document.querySelector('#canevas3'); 
		var contexte3 = canevas3.getContext('2d');
		var image = new Image(); 
		image.src = '../images/camion.png'; 
		var x = X;
		setInterval(animate,50); //appel de la fonction animate 20 fois par seconde
		function animate()
		{
			contexte3.clearRect(0, 0, X, Y); // vider le canevas
			if (x <= -75) x = X  ; else x = x - 3 ;
			contexte3.drawImage(image,x,100,75,50) ;
		} 
	

Les attributs width & height ne figurant pas dans les balises canvas, ceux-ci font 300 pas 150 pixels (valeur par défaut).