Créer des zones de dessin pour JavaScript avec le tag HTML canvas
Avec la balise (tag) HTML <canvas>, vous créez une zone rectangulaire pouvant être remplie de graphiques ou d’animations via JavaScript. Pour cela, un contexte 2D est créé. Vous définissez ensuite le contenu souhaité à l’aide de diffé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 à disposition une zone de dessin dans laquelle vous pouvez créer des graphiques ou des animations avec JavaScript. 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 » (traduction française de canvas) ne fait pas partie à proprement parler de la structure d’une page Web, ce qui empêche l’application de styles CSS ou l’intégration d’autres éléments HTML. Si le tag HTML <canvas> n’est pas supporté par un navigateur, le contenu de repli (fallback) est affiché à la place. Les navigateurs modernes supportent toutefois cet élément par défaut.
- 3x plus rapide, 60 % d'économie
- Haute disponibilité >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 conception en lui-même, mais crée le cadre dans lequel vous pouvez dessiner des graphiques avec JavaScript. La syntaxe de base de l’élément est la suivante :
<canvas id="ExempleCanvas" width="[valeur en pixels]" height="[valeur en pixels]"></canvas>Vous nommez l’élément avec l’attribut id et lui attribuez les dimensions souhaitées avec width (largeur) et height (hauteur). En option, vous pouvez utiliser d’autres paramètres pour préciser la conception du graphique.
Le fonctionnement de <canvas> expliqué par un exemple simple
En utilisant la syntaxe ci-dessus, vous pouvez facilement 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 correspondant :
<!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>Cependant, cette méthode ne vous donnera rien de plus qu’une simple surface vierge. Seul JavaScript 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écessaire. 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 fonctionne 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 fonctionne dans notre exemple avec le code suivant :
const ExempleCanvas = document.getElementById("ExempleCanvas");
const ctx = ExempleCanvas.getContext("2d");Maintenant, tous les préparatifs sont faits pour utiliser HTML <canvas> ! Avec la fonction fillRect(), nous souhaitons 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>À quoi sert la balise HTML <canvas> ?
Alors que dans notre exemple précédent, nous avons simplement 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 transparences, des dégradés de couleurs et des graphiques aux formats GIF, JPEG et PNG. Vous pouvez les recadrer, les redimensionner et les positionner à votre guise. De plus, la fonction temporelle de JavaScript permet de créer des animations à l’intérieur d’un tag HTML <canvas>.
Quelles sont les dimensions autorisées pour un élément <canvas> ?
Les dimensions maximales d’un élément HTML <canvas> varient selon le navigateur et l’environnement. Par exemple, sur iOS, la limite est généralement de 4096 x 4096 pixels, tandis que d’autres systèmes peuvent autoriser des dimensions supérieures à 10 000 x 10 000 pixels. Toutefois, la surface <canvas> n’est pas automatiquement réactive en fonction du rapport hauteur/largeur. Vous devez gérer les dimensions et l’échelle via CSS ou JavaScript pour garantir une bonne adaptation aux différents appareils. En développement Web, c’est ce qu’on appelle le responsive 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 importantes de l’API.
Texte
| Méthode | Description | |
|---|---|---|
font
|
Définit la police de caractè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 | Description |
|---|---|
drawImage()
|
Dépose une image ou une vidéo dans l’élément HTML <canvas>
|
Dessin
| Méthode | Description | |
|---|---|---|
fillRect()
|
Dessine un rectangle plein | |
strokeRect()
|
Dessine un rectangle vide | |
clearRect()
|
Efface les pixels à l’intérieur d’un rectangle |
Chemins
| Méthode | Description | |
|---|---|---|
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 | Description | |
|---|---|---|
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 | Description | |
|---|---|---|
restore()
|
Restaure un état antérieur | |
save()
|
Sauvegarde 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édemment pour cet exemple. Pour cela, nous créons d’abord un rectangle de 500 x 250 pixels via la balise HTML <canvas>. Nous établissons 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 correspondant 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>- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée