Dessiner avec Javascript et la balise canvas

Auteur: Mohamed CHINY Durée necessaire pour le cours de Dessiner avec Javascript et la balise canvas Niveau recommandé pour le cours de Dessiner avec Javascript et la balise canvas Supports vidéo disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 5: Ecrire du texte et importer des images

Toutes les pages

Dessiner avec Javascript et la balise canvas

Page 1
La balise canvas
Page 2
Contexte de rendu et couleurs
Page 3
Dessiner les formes de base - I
Page 4
Dessiner les formes de base - II
Page 5
Ecrire du texte et importer des images
Page 6
Animer les dessins sur un canvas

Ecrire du texte sur un canvas

Il est possible d'écrire du texte sur la balise <canvas>. Pour ce faire, il faut spécifier la police d'écriture et la taille des caractères à l'aide de l'attribut font, et pour écrire on fait appel à la méthode fillText(str,x,y) pour avoir un texte plein ou strokeText(str,x,y) pour un texte dont seulement les contours sont visibles. Les arguments de ces deux dernière méthode représentent respectivement la chaine de caractères à écrire (str), l'abscisse et l'ordonnées du point de début d'écriture (x et y).

Exemple:
<!DOCTYPE html>
<html>
   <head>
      <style>
         #canv{
            border:solid 1px #EEE;
         }
      </style>
      <script>
         window.onload=function(){
            canvas=document.getElementById("canv");
            context=canvas.getContext("2d");
            context.fillStyle="#FF0000";
            context.strokeStyle="rgb(255,127,0)";
            context.lineWidth=1;
            context.font="30pt arial";
            context.fillText("Bonjour",40,40);
            context.strokeText("Bonjour",40,100);
         }
      </script>
   </head>
   <body>
      <canvas id="canv" width="240" height="200">
      </canvas>
   </body>
</html>
Ce qui donne:

Importer et intégrer une image à un canvas

Afin d'intégrer une image à un canvas il faut tout d'abord créer l'objet Image() puis spécifier la source de celui-ci (le chemin vers l'image souhaitée), ensuite on appelle la méthode drawImage(image,src_x,src_y,src_l,src_h,dest_x,dest_y,dest_l,dest_h) dont les argument sont:
  • image: correspond à l'objet Image().
  • src_x et src_y: correspondent aux coordonnées du point où l'on veut commencer l'importation sur l'image d'origine.
  • src_l et src_h: correspondent aux dimensions de la partie que l'on veut importer de l'image d'origine.
  • dest_x et dest_y: correspondent aux coordonnées du point où l'on veut commencer la copie sur le canvas. Ce point correspondra au point de début de l'importation de l'image.
  • dest_l et dest_h: correspondent dimensions de l'espace sur le canvas où on veut placer la partie importée de l'image d'origine.

Exemple:
<!DOCTYPE html>
<html>
   <head>
      <style>
         #canv{
            border:solid 1px #EEE;
         }
         #monimage{
            display:none;
         }
      </style>
      <script>
         window.onload=function(){
            canvas=document.getElementById("canv");
            context=canvas.getContext("2d");
            context.fillStyle="#FF0000";
            context.strokeStyle="rgb(255,127,0)";
            context.lineWidth=1;
            var monimage = new Image();
            monimage.src = "http://www.chiny.me/images/cours/courscanvas.png";
            context.drawImage(monimage,0,0,100,100,40,40,160,140);
         }
      </script>
   </head>
   <body>
      <canvas id="canv" width="240" height="200">
      </canvas>
      <img src="http://www.chiny.me/images/cours/courscanvas.png" id="monimage" />
   </body>
</html>
Ce qui donne:

Il faut noter qu'une image ne peut être importée sur le canvas si elle n'est pas déjà chargée par le navigateur. C'est ce qui explique le fait que j'ai déclaré la balise <img> avec la source de l'image que j'ai utilisé dans le script. J'ai fait en sorte de masquer cette image en CSS car l'objectif ce n'est pas de l'afficher en tant qu'élément mais de l'importer pour l'intégrer au canvas.

Vous avez certainement remarqué que l'image a été agrandie lors de son intégration, car j'ai spécifié les dimensions sur l'espace du canvas plus larges que celles de la partie de l'image importée.