bitmap, canvas

L'élément canvas

L'élément canvas est un élément de l'html5 qui définit une zone de pixels. Dans cette zone, on va pouvoir définir une image. Cette image sera définie pixel par pixel : il s'agit donc ici de définir une image bitmap et non une image vectorielle.

Nous en dirons peu sur les instructions permettant de dessiner dans le canvas. Pour en savoir plus, vous pouvez chercher sur le web les nombreux exemples traitant de ce sujet. Un tutoriel bref et clair sur le sujet. En parcourant ce tutoriel, on découvre quelques instructions de tracés de figures géométriques simples, ce sont des instructions très proches de celles qui permettent de dessiner les mêmes figures en SVG : la différence est la nature du résultat, bitmap pour le canvas, vectoriel pour le SVG. Dans la suite de ces pages, nous reprenons les idées exposées dans la page Jouer avec les pixels de ce tutoriel.

On retiendra, entre autres, le schéma de cette page qui montre que les abscisses sont orientés de la gauche vers la droite et les ordonnées du haut vers le bas :
orientation

Agir sur les pixels

Les exemples ci-dessous et leurs commentaires montrent comment agir sur les pixels

La tableau que l'on a nommé tableauPixels dans les exemples ci-dessous contient les composantes RGBa de l'image.

La valeur de la composante du rouge du pixel numéro i est tableauPixels[4*i]
La valeur de la composante du vert du pixel numéro i est tableauPixels[4*i+1]
La valeur de la composante du bleu du pixel numéro i est tableauPixels[4*i+2]
La valeur de l'opacité du pixel numéro i est tableauPixels[4*i+3] (valeur entre 0 et 255. Proche de 0, le pixel est transparent, proche de 255 il ne l'est pas du tout).

Exemple :

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
</head>
<body>
  
	
	<canvas id="figure1" width="200" height="200" style="border: dashed 1px #ff0000;">
		 
	</canvas>
	
	

 
<script>

// on récupère l'élément canvas par son identifiant :
var c = document.getElementById("figure1");
// on précise que l'on va faire de la 2d 
// (l'élément canvas permet aussi de faire de la 3d)
var ctx= c.getContext("2d");

// on crée une image de 10px sur 5px que l'on nomme schmoll
var schmoll = ctx.createImageData( 10 , 5 );


// on récupère le tableau des pixels de l'image
// (ils sont tous blancs pour le moment !)
var tableauPixels = schmoll.data;  

// affichons les valeurs des composantes RGBa de l'image schmoll :  
for(var i=0 ; i < tableauPixels.length ; i+=4){
	document.write("<br>"); //passage à la ligne
	document.write(" Composante rouge du pixel " + i/4 + " : ");
	document.write(tableauPixels[i] + "; ");  
	document.write(" Composante vert du pixel " + i/4 + " : ");
	document.write(tableauPixels[i+1]+ "; ");  
	document.write(" Composante bleu du pixel " + i/4 + " : ");
	document.write(tableauPixels[i+2] + "; "); 
	document.write(" Composante alpha du pixel " + i/4 + " : ");
	document.write(tableauPixels[i+3]); 	
}

 

</script> 

</body>
</html>

Affichons de nouveau les composantes RGB mais après les avoir modifiées :

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
</head>
<body>
  
	
	<canvas id="figure2" width="200" height="200" style="border: dashed 1px #ff0000;">
		 
	</canvas>
	
<script>

// on récupère l'élément canvas par son identifiant :
var c = document.getElementById("figure2");
// on précise que l'on va faire de la 2d 
// (l'élément canvas permet aussi de faire de la 3d)
var ctx= c.getContext("2d");

// on crée une image de 10px sur 5px que l'on nomme schmoll
var schmoll = ctx.createImageData( 10 , 5 );

// on récupère le tableau des pixels de l'image
// (ils sont tous blancs pour le moment !)
var tableauPixels = schmoll.data;  


// On  les passe en vert 
// avec une opacité à 25% :
for(var i=0 ; i < tableauPixels.length ; i+=4)
{
	tableauPixels[i+1] = 200; // composante du vert 
	tableauPixels[i+3] = 64; // Valeur Alpha
}

// affichons les valeurs des composantes RGBa de l'image schmoll :
for(var i=0 ; i < tableauPixels.length ; i+=4)
{
	document.write("<br>"); //passage à la ligne
	document.write(" Composante rouge du pixel " + i/4 + " : ");
	document.write(tableauPixels[i] + "; ");  
	document.write(" Composante vert du pixel " + i/4 + " : ");
	document.write(tableauPixels[i+1]+ "; ");  
	document.write(" Composante bleu du pixel " + i/4 + " : ");
	document.write(tableauPixels[i+2]+ "; "); 
	document.write(" Composante alpha du pixel " + i/4 + " : ");
	document.write(tableauPixels[i+3]); 	
}


//  on affiche maintenant l'image au point (10,50)
ctx.putImageData( schmoll  , 10 , 50 ); 

</script> 

</body>
</html>

Plutôt qu'un raisonnement sur la longueur du tableau tableauPixels, on peut raisonner avec le nombre de pixels de l'image :

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
</head>
<body>
  
	
	<canvas id="figure3" width="200" height="200" style="border: dashed 1px #ff0000;">
		 
	</canvas>
	
<script>

// on récupère l'élément canvas par son identifiant :
var c = document.getElementById("figure3");
// on précise que l'on va faire de la 2d 
// (l'élément canvas permet aussi de faire de la 3d)
var ctx= c.getContext("2d");

// on crée une image de 10px sur 5px que l'on nomme schmolldu
var schmolldu = ctx.createImageData( 10 , 5 );

var nbPixels = 10*5 ;

// on récupère le tableau des pixels de l'image
// (ils sont tous blancs pour le moment !)
var tableauPixels = schmolldu.data;  


// On  les passe en vert 
// avec une opacité à 75% :
for(var i = 0 ; i < nbPixels ; i += 1)
{
	tableauPixels[4*i+1] = 200; // composante du vert 
	tableauPixels[4*i+3] = 192; // Valeur Alpha
}

// affichons les valeurs des composantes RGBa de l'image schmoll :
for(var i = 0 ; i < nbPixels ; i += 1)
{
	document.write("<br>"); //passage à la ligne
	document.write(" Composante rouge du pixel " + i + " : ");
	document.write(tableauPixels[4*i] + "; ");  
	document.write(" Composante vert du pixel " + i + " : ");
	document.write(tableauPixels[4*i+1]+ "; ");  
	document.write(" Composante bleu du pixel " + i + " : ");
	document.write(tableauPixels[4*i+2]+ "; "); 
	document.write(" Composante alpha du pixel " + i + " : ");
	document.write(tableauPixels[4*i+3]); 	
}


//  on affiche maintenant l'image au point (10,50)
ctx.putImageData( schmolldu  , 10 , 50 ); 

</script> 

</body>
</html>