Canvas.

Que peut faire Canvas ?

C'est une zone de pixels transparents qui permet d'effectuer des tracés, supporte des fonctionnalités pour le dessin, des animations 2D et 3D et de la vidéo. A la différence de SVG, Canevas est une surface de dessin bitmap. Pour profiter de ses fonctionnalités, on a recours à javascript.

<script type="text/javascript">
// ici mon script...
</script>

<canvas id="mon-canvas" width="400px" height="200px"> 
  Texte alternatif pour les navigateurs ne supportant pas Canvas.
</canvas>
									

Les dimensions de la boîte sont déterminées soit dans la balise HTML soit via CSS. Les valeurs pas défauts sont width:150px et height:300px. Il est recommandé d'utiliser les attributs via l'élément HTML. Si les valeurs sont modifiées via la CSS, l'image sera dessinée avec les valeurs du canvas puis étirée dans l'espace donné par la CSS (au risque d'une déformation). Canvas peut être stylé comme une image avec des marges, des contours, un arrière plan, etc. Par contre le fait de stylé le canvas n'affectera pas le fait de dessiner sur sa surface. Par contre, il est important d'avoir un contenu de repli à afficher au cas où le navigateur ne supporte pas cet élément.

.canvas-01 {
margin: 0 auto; /* ne fonctionne pas !? */
border: 2px solid black;
} 

<canvas id="mon-canvas" class="canvas-01" width="400px" height="200px">
Elément non supporté !
</canvas>
 ou bien:
 
<canvas id="mon-canvas" class="canvas-01" width="400px" height="200px">
<img src="../images/img.png" width="400" height="200" alt="image de repli" />
</canvas>
									

Dans le détail.

Le système de coordonnées en 2D fonctionne de haut à droite (x) et de haut en bas (y). Le point de référence (0,0) se situe donc en haut à gauche de la boîte. La première coordonnée définit x (horizontal) et y (vertical). Les coordonnées correspondent à la grille entourant les pixels et non les pixels eux-même. Pour utiliser les fonctionnalités 2D de canvas, il faut les spécifier dans le code javascript de cette manière:

<script type="text/javascript">
  var c = document.getElementById("mon-canvas");
  	// document = la racine
  	// getElementById = cible l'élément canvas par son ID
  	
  var ctx = c.getContext("2d");
  	// getContext = donne le contexte et les fonctions disponibles.
  	
  // suite du script...
</script>

									

Pour le support 3D, le contexte est 'webgl'. Par contre, il semblerait que les variables doivent être déclarées au sein d'une fontction de cette manière et appeler la fonction via le body:

    function ma_fonction() {
      var canvas = document.getElementById("mon-canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

// suite du script...
      }
    }
    
    <body onload="ma_fonction">

									

En modifiant le code ci-dessus, il est possible de vérifier la prise en charge de canvas et exécuter un code le cas échéant:

    function ma_fonction() {
      var canvas = document.getElementById("mon-canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
			// code du dessin

      } else {
      	// code de repli
      }
    }
    
    <body onload="ma_fonction">

									

Effectuer un tracé.

Pour réaliser un tracé il faut tout d'abord l'initialiser avec la méthode 'beginPath()' puis lui donner un point de départ avec 'moveTo()'. Ensuite, le tracé en lui -même se fait via 'lineTo()'. Pour fermer le tracé on utilise 'closePath()'.

Exemple ligne.

Canvas non supporté !
<script type="text/javascript">
function drawLine1(){

var canvas = document.getElementById("canvas01"); 
if (canvas.getContext){
	var context = canvas.getContext('2d');
	
 context.beginPath();
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
 }
}  
</script>

<body onload="drawLine1()">
								

Les formes primitives.

Canvas ne supporte qu'une seule forme primitive, le rectangle. Pour obtenir d'autres formes il faudra donc combiner plusieurs trajets. Pour le rectangle, nous disposons de trois fonctions: 'fillRect(x, y, largeur, hauteur)'; strokeRect(x, y, largeur, hauteur); et clearRect(x, y, largeur, hauteur). Où x et y donne la position sur le canvas (par rapport au point d'origine soit le coin suppérieur gauche) puis la largeur et la hauteur de la taille du rectangle.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
								
    function draw() {
      var canvas = document.getElementById('canvas03');
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(10, 10, 50, 50);

        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
      }
    }							

Articles connexes:

Canvas et javascript.[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/07/2021