W3docs
fr
Se connecter

Dessin sur Canvas

On this page, you can find useful information about the HTML <canvas> element, as well as to learn to draw with canvas step by step with our code examples.

JavaScript est utilisé pour dessiner sur le canevas. Nous allons procéder étape par étape.

1. Trouver l'élément Canvas

Pour trouver l'élément canvas, utilisez la méthode HTML DOM : getElementById() :

Dessin sur Canvas

var canvas=document.getElementById("canvas");

2. Créer un objet de dessin

Utilisez la méthode getContext() pour obtenir un contexte de dessin, qui fournit des propriétés et des méthodes :

Dessin sur Canvas

var ctx = canvas.getContext("2d");

3. Dessiner sur l'élément Canvas

Vous pouvez maintenant dessiner sur le canevas. La propriété fillStyle peut être une couleur CSS, un motif ou un dégradé.

Dessin sur Canvas

ctx.fillStyle = "#1c87c9";

Vous pouvez également utiliser la méthode fillRect(x, y, width, height) pour dessiner un rectangle plein sur le canevas. Les paramètres spécifient les coordonnées x et y du coin supérieur gauche, suivies de la largeur et de la hauteur :

Dessin sur Canvas

ctx.fillRect(0, 0, 230, 130);

Exemple de la balise HTML <canvas> :

Exemple de la balise HTML <canvas>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#1c87c9";
      ctx.fillRect(0, 0, 230, 130)
    </script>
  </body>
</html>
Essayez vous-même »

Pratique

Pratique

Quels sont les éléments requis pour dessiner sur un canevas HTML ?