logo oujood
🔍

HTML5 Canvas : Dessiner des Graphiques Dynamiques avec JavaScript

Ce guide pratique vous explique comment implémenter l'élément <canvas> HTML5 pour créer des graphiques dynamiques, dessiner des formes géométriques, appliquer des dégradés et manipuler des images.
Découvrez les techniques de dessin 2D avec JavaScript, les méthodes essentielles du contexte Canvas et les bonnes pratiques pour créer des visualisations interactives.
L'élément <canvas> est l'outil incontournable pour générer des graphiques vectoriels, des animations et des jeux directement dans le navigateur.

OUJOOD.COM

La balise Canvas HTML5 : Créer des Graphiques Dynamiques

HTML5 cours tutorial

L'élément <canvas> représente une révolution dans la création de graphiques dynamiques en HTML5. Cette API puissante permet aux développeurs de dessiner des formes vectorielles, d'afficher des images, de créer des animations fluides et de développer des jeux interactifs directement dans le navigateur, sans plugin externe.

Dans ce tutoriel approfondi, vous découvrirez comment maîtriser le contexte 2D du canvas, utiliser les méthodes de dessin avancées, optimiser les performances de rendu et créer des visualisations graphiques professionnelles avec JavaScript.

Exemple Complet : Dessiner Formes Géométriques et Texte Stylisé

Cet exemple démontre les capacités du canvas pour créer un cercle avec dégradé radial, un triangle rempli de couleur unie, un rectangle avec dégradé linéaire multicolore et un texte avec contour dégradé.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Dessiner des Graphiques</title>
</head>
<body>
<canvas id="monCanvas" width="280" height="160"
style="border:1px solid #c3c3c3;">
Votre navigateur ne supporte pas l'élément <canvas>.
</canvas>
<script>
// Récupération de l'élément canvas du DOM
var c=document.getElementById("monCanvas");
var canvOK=1;
// Vérification de la compatibilité du navigateur avec canvas
try {c.getContext("2d");}
catch (er) {canvOK=0;}
if (canvOK==1) {
// Obtention du contexte de rendu 2D
var ctx=c.getContext("2d");
// Dessin d'un triangle rouge rempli
ctx.beginPath();
ctx.moveTo(180,20); // Point de départ du triangle
ctx.lineTo(250,40); // Deuxième sommet
ctx.lineTo(140,100); // Troisième sommet
ctx.fillStyle="#FF0000"; // Couleur de remplissage rouge
ctx.fill();
// Création d'un dégradé radial pour le cercle
var grd=ctx.createRadialGradient(75,50,5,90,50,90);
grd.addColorStop(0,"white"); // Couleur au centre
grd.addColorStop(1,"blue"); // Couleur en périphérie
ctx.fillStyle=grd;
// Dessin d'un cercle avec le dégradé
ctx.beginPath();
ctx.arc(75,50,40,0,2*Math.PI); // Centre (75,50), rayon 40px
ctx.fill();
// Création d'un dégradé linéaire multicolore
var grd2=ctx.createLinearGradient(20,90,120,90);
grd2.addColorStop(0,"black");
grd2.addColorStop("0.3","magenta");
grd2.addColorStop("0.5","blue");
grd2.addColorStop("0.6","green");
grd2.addColorStop("0.8","gold");
grd2.addColorStop(1,"red");
ctx.fillStyle=grd2;
// Dessin d'un rectangle avec dégradé
ctx.fillRect(20,105,100,50);
// Configuration de la police pour le texte
ctx.font="30px Verdana";
// Création d'un dégradé pour le contour du texte
var grd3=ctx.createLinearGradient(140,20,240,90);
grd3.addColorStop(0,"black");
grd3.addColorStop("0.2","magenta");
grd3.addColorStop("0.5","blue");
grd3.addColorStop("0.6","green");
grd3.addColorStop(1,"red");
ctx.strokeStyle=grd3;
// Dessin du texte avec contour dégradé
ctx.strokeText("Un texte",140,130);
}
</script>
</body>
</html>

Qu'est-ce que l'Élément <canvas> HTML5 ?

L'élément <canvas> HTML5 est un conteneur graphique programmable qui permet de générer des graphiques vectoriels et bitmap directement dans le navigateur. Contrairement aux images statiques, le canvas offre un rendu dynamique en temps réel via des scripts JavaScript.

Le <canvas> fonctionne comme une zone de dessin bitmap où chaque pixel peut être manipulé individuellement. Cette API puissante permet de créer des visualisations de données interactives, des jeux HTML5, des éditeurs graphiques en ligne et des animations complexes.

L'élément canvas dispose de méthodes natives pour dessiner des chemins vectoriels, des formes géométriques primitives (rectangles, cercles, arcs), du texte stylisé, appliquer des transformations matricielles et intégrer des images externes.

Support Navigateurs pour Canvas HTML5 (2026)

En 2026, l'élément <canvas> est universellement supporté par tous les navigateurs modernes : Chrome, Firefox, Safari, Edge et Opera. Le support est complet pour les contextes 2D et WebGL.

Note importante : Internet Explorer 11 (fin de support en 2022) était le dernier navigateur Microsoft à supporter partiellement canvas. Les versions IE 8 et antérieures ne supportaient pas cette API. Aujourd'hui, avec Microsoft Edge basé sur Chromium, le support canvas est optimal.

Comment Créer une Zone de Dessin Canvas en HTML5

Un canvas représente une surface de dessin rectangulaire bitmap définie dans votre page HTML. La création d'un canvas nécessite l'utilisation de la balise <canvas> avec des attributs dimensionnels obligatoires.

Particularité importante : Par défaut, l'élément <canvas> est transparent et sans bordure. Il est invisible jusqu'à ce que du contenu soit dessiné ou qu'un style CSS soit appliqué.

Syntaxe de Base du Canvas

Le balisage minimal pour créer un canvas fonctionnel :

  📋 Copier le code

<canvas id="monCanvas" width="200" height="100"></canvas>

Règle essentielle : Toujours spécifier un attribut id unique pour référencer le canvas en JavaScript, et des attributs width et height pour définir la résolution de la zone de dessin en pixels.

Astuce professionnelle : Vous pouvez intégrer plusieurs éléments <canvas> dans une même page HTML pour créer des interfaces multi-graphiques ou des tableaux de bord interactifs.

Ajouter une Bordure Visible au Canvas

Pour visualiser les limites du canvas pendant le développement, utilisez l'attribut style avec une bordure CSS :

  📋 Copier le code

<canvas id="monCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Dessiner sur le Canvas avec JavaScript

Tout le processus de dessin sur canvas s'effectue via JavaScript en utilisant le contexte de rendu 2D. Le canvas lui-même n'est qu'un conteneur ; c'est le contexte qui fournit les méthodes de dessin.

Exemple : Rectangle Rouge avec Remplissage

  📋 Copier le code

<script>
// Étape 1 : Récupération de l'élément canvas par son ID
var c=document.getElementById("monCanvas");
// Étape 2 : Obtention du contexte de rendu 2D
var ctx=c.getContext("2d");
// Étape 3 : Définition de la couleur de remplissage en hexadécimal
ctx.fillStyle="#FF0000";
// Étape 4 : Dessin du rectangle (x, y, largeur, hauteur)
ctx.fillRect(0,0,150,75);
</script>

Explication Technique Détaillée

Étape 1 - Sélection du canvas : Utilisez getElementById() pour cibler l'élément canvas dans le DOM :

  📋 Copier le code

var c=document.getElementById("monCanvas");

Étape 2 - Activation du contexte 2D : Appelez la méthode getContext("2d") pour obtenir l'interface de dessin 2D. Le paramètre "2d" est obligatoire et spécifie le type de rendu :

  📋 Copier le code

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

L'objet getContext("2d") est une interface native HTML5 qui expose de nombreuses propriétés et méthodes pour manipuler les graphiques : tracés vectoriels, formes primitives, courbes de Bézier, textes, images et transformations géométriques.

Étape 3 & 4 - Configuration et dessin : Ces deux lignes définissent le style de remplissage et dessinent un rectangle :

  📋 Copier le code

ctx.fillStyle="#FF0000"; // Rouge en notation hexadécimale
ctx.fillRect(0,0,150,75); // Position (0,0), dimensions 150x75px

La propriété fillStyle accepte plusieurs formats : couleurs CSS (hexadécimal, RGB, RGBA, HSL), dégradés linéaires ou radiaux, et motifs d'image. La valeur par défaut est #000000 (noir).

La méthode fillRect(x, y, largeur, hauteur) dessine un rectangle rempli en utilisant le style de remplissage actif. Les coordonnées (x,y) définissent le coin supérieur gauche.

Système de Coordonnées du Canvas

Le système de coordonnées canvas utilise un repère cartésien 2D avec l'origine (0,0) située dans le coin supérieur gauche. L'axe X s'étend horizontalement vers la droite, l'axe Y verticalement vers le bas.

Pour la méthode fillRect() précédente avec les paramètres (0,0,150,75), l'interprétation est la suivante : commencer au point d'origine (0,0) et dessiner un rectangle de 150 pixels de largeur et 75 pixels de hauteur.

Canvas - Dessiner des Chemins et Tracés Vectoriels

Pour créer des lignes droites personnalisées sur un canvas, utilisez les méthodes de tracé de chemin qui définissent des points de contrôle :

moveTo(x, y) : Déplace le "stylo virtuel" vers une position sans tracer de ligne. Définit le point de départ du tracé.

lineTo(x, y) : Trace une ligne droite depuis la position actuelle jusqu'aux coordonnées spécifiées.

Méthode de rendu : Pour afficher réellement le tracé, utilisez une méthode de rendu comme stroke() (contour) ou fill() (remplissage).

Exemple : Tracer une Ligne Diagonale

Création d'une ligne partant du point (0,0) jusqu'au point (200,100) :

  📋 Copier le code

var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
// Définir le point de départ du tracé
ctx.moveTo(0,0);
// Tracer une ligne vers le point d'arrivée
ctx.lineTo(200,100);
// Rendre visible le tracé avec la méthode stroke
ctx.stroke();

Exemple Pratique : Graphique Linéaire avec Canvas

Cet exemple démontre comment utiliser canvas pour créer un graphique linéaire simple avec une image de fond servant de repère cartésien :

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Graphique Linéaire</title>
</head>
<body>
<canvas id="monCanvas" width="180" height="130"
style="border:1px solid #c3c3c3;">
Votre navigateur ne supporte pas l'élément <canvas>.
</canvas>
<script>
// Récupération du contexte de rendu
var ctx = document.getElementById('monCanvas').getContext('2d');
// Création d'un objet Image pour le fond
var img = new Image();
img.src = 'http://www.oujood.com/html5/images/repere.png';
// Dessiner après chargement complet de l'image
img.onload = function(){
// Afficher l'image de fond (grille/repère)
ctx.drawImage(img,0,0);
// Commencer un nouveau tracé pour la courbe
ctx.beginPath();
// Définir les points de données du graphique
ctx.moveTo(30,96); // Point de départ
ctx.lineTo(70,66); // Deuxième point
ctx.lineTo(103,76); // Troisième point
ctx.lineTo(170,15); // Point final
// Tracer la ligne du graphique
ctx.stroke();
}
</script>
</body>
</html>

Canvas - Dessiner des Cercles et Arcs

Pour créer des formes circulaires et arcs sur canvas, utilisez la méthode polyvalente arc() :

Syntaxe : arc(x, y, rayon, angleDebut, angleFin)

Les angles sont exprimés en radians. Pour un cercle complet : 0 à 2π (2*Math.PI).

Exemple : Créer un Cercle Complet

  📋 Copier le code

var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
// Initialiser un nouveau tracé
ctx.beginPath();
// Dessiner un arc de cercle complet
// Centre (95,50), rayon 40px, de 0 à 2π radians
ctx.arc(95,50,40,0,2*Math.PI);
// Afficher le contour du cercle
ctx.stroke();

Canvas - Afficher du Texte Stylisé

Le canvas offre deux méthodes principales pour afficher du texte avec un contrôle typographique complet :

font : Propriété CSS pour définir la famille de police, taille, style et poids

fillText(texte, x, y) : Affiche du texte rempli (plein) à la position spécifiée

strokeText(texte, x, y) : Affiche uniquement le contour du texte

Utilisation de fillText() : Texte Rempli

Exemple d'affichage d'un texte plein avec la police Arial 30px :

  📋 Copier le code

var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
// Configuration de la police (syntaxe CSS)
ctx.font="30px Arial";
// Afficher le texte rempli à la position (10,50)
ctx.fillText("Hello World",10,50);

Utilisation de strokeText() : Texte en Contour

Exemple d'affichage d'un texte avec uniquement le contour des caractères :

  📋 Copier le code

var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
// Configuration de la typographie
ctx.font="30px Arial";
// Dessiner uniquement le contour du texte
ctx.strokeText("Hello World",10,50);

Canvas - Dégradés Linéaires et Radiaux

Les dégradés canvas permettent de créer des transitions de couleur fluides pour remplir des formes, du texte ou des tracés. Le canvas supporte deux types de dégradés professionnels :

createLinearGradient(x0, y0, x1, y1) : Crée un dégradé linéaire entre deux points

createRadialGradient(x0, y0, r0, x1, y1, r1) : Crée un dégradé radial entre deux cercles

Après création d'un objet dégradé, utilisez la méthode addColorStop(position, couleur) pour définir les paliers de couleur. Les positions sont des valeurs entre 0.0 (début) et 1.0 (fin).

Exemple : Dégradé Linéaire Horizontal

Création d'un rectangle avec transition rouge vers blanc :

  📋 Copier le code

var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
// Créer un dégradé horizontal (de x=0 à x=200)
var grd=ctx.createLinearGradient(0,0,200,0);
// Couleur au début du dégradé (position 0)
grd.addColorStop(0,"red");
// Couleur à la fin du dégradé (position 1)
grd.addColorStop(1,"white");
// Appliquer le dégradé comme style de remplissage
ctx.fillStyle=grd;
// Dessiner le rectangle avec le dégradé
ctx.fillRect(10,10,150,80);

Exemple : Dégradé Radial Circulaire

Création d'un rectangle avec dégradé du centre vers l'extérieur :

  📋 Copier le code

var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
// Créer un dégradé radial
// Cercle intérieur : centre (75,50), rayon 5
// Cercle extérieur : centre (90,60), rayon 100
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
// Couleur au centre
grd.addColorStop(0,"red");
// Couleur en périphérie
grd.addColorStop(1,"white");
// Appliquer le dégradé
ctx.fillStyle=grd;
// Remplir le rectangle avec le dégradé radial
ctx.fillRect(10,10,150,80);

Canvas - Intégration et Manipulation d'Images

Pour afficher des images bitmap sur le canvas, utilisez la méthode drawImage() qui supporte plusieurs signatures :

drawImage(image, x, y) : Affiche l'image à sa taille native

drawImage(image, x, y, largeur, hauteur) : Redimensionne l'image

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) : Découpe et affiche une portion d'image

Exemple : Afficher une Image sur Canvas

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Affichage d'Images</title>
</head>
<body>
<canvas id="monCanvas" width="260" height="160"
style="border:1px solid #c3c3c3;">
Votre navigateur ne supporte pas l'élément <canvas>.
</canvas>
<script>
// Obtenir le contexte de rendu
var ctx = document.getElementById('monCanvas').getContext('2d');
// Créer un nouvel objet Image
var img = new Image();
// Définir la source de l'image
img.src = 'http://www.oujood.com/html5/images/image007.jpg';
// Attendre le chargement complet avant de dessiner
img.onload = function(){
// Dessiner l'image à la position (0,0)
ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

Référence Complète HTML Canvas

Pour une documentation exhaustive de toutes les propriétés et méthodes de l'API Canvas, avec des exemples interactifs et des cas d'usage avancés, consultez notre référence complète Canvas.

Balise Description
<canvas> Élément HTML5 utilisé pour dessiner des graphiques dynamiques via JavaScript (contextes 2D et WebGL)

Par carabde | Mis à jour le 11 février 2026

chapitre précédent  sommaire  chapitre suivant