# Créer des zones de dessin pour JavaScript avec le tag HTML canvas Avec la balise (*tag*) HTML ``, 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 ``. ## HTML canvas : qu’est-ce que c’est ? HTML `` 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-que-le-html/) à l’aide du [tag HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/). 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](https://www.ionos.fr/digitalguide/sites-internet/web-design/apprendre-le-css-avec-simplicite/) ou l’intégration d’autres éléments HTML. Si le tag HTML `` 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. ## Tag HTML `` : la syntaxe L’élément HTML `` 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 : ```html ``` 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 `` 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 : ```html

Exemple de canvas 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 `` 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 : ```html const ExempleCanvas = document.getElementById("ExempleCanvas"); const ctx = ExempleCanvas.getContext("2d"); ``` Maintenant, tous les préparatifs sont faits pour utiliser HTML `` ! 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 : ```html

Exemple de canvas HTML

``` ## À quoi sert la balise HTML `` ? Alors que dans notre exemple précédent, nous avons simplement tracé un rectangle, l’élément `` 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 `` ? 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 `` 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 `` à 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 ``
### 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 `` : 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 ``. 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 : ```html

Exemple de HTML Canvas avec du texte et un dégradé

Nous utilisons les méthodes strokeText() et createLinearGradient()

``` This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-canvas/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-canvas/) for AI/LLM consumption.