Avec la balise (tag) HTML <canvas>, vous créez une zone rec­tan­gu­laire pouvant être remplie de gra­phiques ou d’ani­ma­tions via Ja­vaS­cript. Pour cela, un contexte 2D est créé. Vous dé­fi­nis­sez ensuite le contenu souhaité à l’aide de dif­fé­rentes méthodes pour l’API de la balise <canvas>.

HTML canvas : qu’est-ce que c’est ?

HTML <canvas> est un élément qui met à dis­po­si­tion une zone de dessin dans laquelle vous pouvez créer des gra­phiques ou des ani­ma­tions avec Ja­vaS­cript. La taille de cette zone est définie par des attributs de hauteur et de largeur. Elle peut être intégrée n’importe où sur un document HTML à l’aide du tag HTML.

Le contenu de cette « toile » (tra­duc­tion française de canvas) ne fait pas partie à pro­pre­ment parler de la structure d’une page Web, ce qui empêche l’ap­pli­ca­tion de styles CSS ou l’in­té­gra­tion d’autres éléments HTML. Si le tag HTML <canvas> n’est pas supporté par un na­vi­ga­teur, le contenu de repli (fallback) est affiché à la place. Les na­vi­ga­teurs modernes sup­por­tent toutefois cet élément par défaut.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Tag HTML <canvas> : la syntaxe

L’élément HTML <canvas> ne fournit pas d’outils de con­cep­tion en lui-même, mais crée le cadre dans lequel vous pouvez dessiner des gra­phiques avec Ja­vaS­cript. La syntaxe de base de l’élément est la suivante :

<canvas id="ExempleCanvas" width="[valeur en pixels]" height="[valeur en pixels]"></canvas>
html

Vous nommez l’élément avec l’attribut id et lui attribuez les di­men­sions sou­hai­tées avec width (largeur) et height (hauteur). En option, vous pouvez utiliser d’autres pa­ra­mètres pour préciser la con­cep­tion du graphique.

Le fonc­tion­ne­ment de <canvas> expliqué par un exemple simple

En utilisant la syntaxe ci-dessus, vous pouvez fa­ci­le­ment créer une zone de dessin à tout moment. Dans notre exemple, cette zone aura une largeur de 500 pixels et une hauteur de 250 pixels. Voici le code cor­res­pon­dant :

<!DOCTYPE html>
<html>
<body>
<h1>Exemple de canvas HTML</h1>
<canvas id="ExempleCanvas" width="500" height="250" style="border: 1px solid grey"></canvas>
</body>
</html>
html

Cependant, cette méthode ne vous donnera rien de plus qu’une simple surface vierge. Seul Ja­vaS­cript vous permet de remplir l’élément <canvas> généré avec des formes, des images, des textes ou des dégradés, et d’animer ces objets si né­ces­saire. Le contenu est déposé sous forme de pixels dans un bitmap, qui peut ensuite être converti en un fichier graphique PNG.

Pour utiliser cet élément, vous devez recourir à la méthode getElementById(). Cela ne fonc­tionne que si vous avez attribué un ID unique à la surface <canvas>. Si vous souhaitez peindre, dessiner ou interagir d’une autre manière dans la zone définie, vous devez créer un contexte 2D. Cela fonc­tionne dans notre exemple avec le code suivant :

const ExempleCanvas = document.getElementById("ExempleCanvas");
const ctx = ExempleCanvas.getContext("2d");
html

Main­te­nant, tous les pré­pa­ra­tifs sont faits pour utiliser HTML <canvas> ! Avec la fonction fillRect(), nous sou­hai­tons dessiner un simple rectangle dans la zone définie. Celui-ci doit être de couleur bleu pétrole (teal en anglais) et mesurer 200 pixels de large et 150 pixels de haut. Nous le plaçons à 10 pixels du bord gauche et à 50 pixels du bord supérieur. L’ensemble du code se présente comme suit :

<!DOCTYPE html>
<html>
<body>
<h1>Exemple de canvas HTML</h1>
<canvas id="ExempleCanvas" width="500" height="250" style="border: 1px solid grey;"></canvas>
<script>
const ExempleCanvas = document.getElementById("ExempleCanvas");
const ctx = ExempleCanvas.getContext("2d");
ctx.fillStyle = "teal";
ctx.fillRect(10, 50, 200, 150);
</script>
</body>
</html>
html

À quoi sert la balise HTML <canvas> ?

Alors que dans notre exemple précédent, nous avons sim­ple­ment tracé un rectangle, l’élément <canvas> permet également de réaliser des formes beaucoup plus complexes. Il est possible de créer et intégrer des arcs de cercle, des zones de texte, des trans­pa­rences, des dégradés de couleurs et des gra­phiques aux formats GIF, JPEG et PNG. Vous pouvez les recadrer, les re­di­men­sion­ner et les po­si­tion­ner à votre guise. De plus, la fonction tem­po­relle de Ja­vaS­cript permet de créer des ani­ma­tions à l’intérieur d’un tag HTML <canvas>.

Quelles sont les di­men­sions au­to­ri­sées pour un élément <canvas> ?

Les di­men­sions maximales d’un élément HTML <canvas> varient selon le na­vi­ga­teur et l’en­vi­ron­ne­ment. Par exemple, sur iOS, la limite est gé­né­ra­le­ment de 4096 x 4096 pixels, tandis que d’autres systèmes peuvent autoriser des di­men­sions su­pé­rieures à 10 000 x 10 000 pixels. Toutefois, la surface <canvas> n’est pas au­to­ma­ti­que­ment réactive en fonction du rapport hauteur/largeur. Vous devez gérer les di­men­sions et l’échelle via CSS ou Ja­vaS­cript pour garantir une bonne adap­ta­tion aux dif­fé­rents appareils. En dé­ve­lop­pe­ment Web, c’est ce qu’on appelle le res­pon­sive design.

Aperçu des méthodes pour l’API de HTML <canvas>

Nous avons déjà abordé la création d’un contexte 2D. Avec un tel contexte obtenu via getContext("2d"), vous pouvez dessiner sur la surface <canvas> à tout moment. Voici un résumé des méthodes les plus im­por­tantes de l’API.

Texte

Méthode Des­crip­tion
font Définit la police de ca­rac­tères
fillText() Insère un texte entier dans la zone
strokeText() Dessine le contour d’un texte, sans remplir l’intérieur

Image

Méthode Des­crip­tion
drawImage() Dépose une image ou une vidéo dans l’élément HTML <canvas>

Dessin

Méthode Des­crip­tion
fillRect() Dessine un rectangle plein
strokeRect() Dessine un rectangle vide
clearRect() Efface les pixels à l’intérieur d’un rectangle

Chemins

Méthode Des­crip­tion
beginPath() Commence un nouveau chemin
lineTo() Trace une ligne jusqu’au chemin
moveTo() Déplace le chemin vers un point précis

Création

Méthode Des­crip­tion
addColorStop() Définit les couleurs et les positions pour un dégradé
createLinearGradient() Crée un dégradé linéaire
createPattern() Crée un motif à partir d’une image ou d’un autre élément
shadowBlur Définit le flou pour une ombre
shadowColor Détermine la couleur d’une ombre

Autres fonctions

Méthode Des­crip­tion
restore() Restaure un état antérieur
save() Sau­ve­garde l’état actuel et ses attributs

HTML <canvas> : exemple avec texte et dégradé de couleurs

Nous allons utiliser quelques-unes des méthodes décrites pré­cé­dem­ment pour cet exemple. Pour cela, nous créons d’abord un rectangle de 500 x 250 pixels via la balise HTML <canvas>. Nous éta­blis­sons ensuite un contexte 2D. Enfin, nous y insérons un titre et une autre phrase qui reçoit un dégradé de couleurs. Le code cor­res­pon­dant se présente comme suit :

<!DOCTYPE html>
<html>
<body>
<h1>Exemple de HTML Canvas avec du texte et un dégradé</h1>
<h2>Nous utilisons les méthodes strokeText() et createLinearGradient()</h2>
<canvas id="ExempleCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const canvas = document.getElementById("ExempleCanvas");
const ctx = canvas.getContext("2d");
// Dessiner le texte avec le contour
ctx.font = "40px Calibri";
ctx.strokeText("Il y a un titre ici", 20, 50);
// Créer un dégradé
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "teal");
gradient.addColorStop(0.5, "blue");
gradient.addColorStop(1, "green");
// Appliquer le dégradé au texte
ctx.font = "30px Calibri";
ctx.strokeStyle = gradient;
ctx.strokeText("Il y a une autre phrase ici", 20, 90);
</script>
</body>
</html>
html
Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée
Aller au menu principal