Accueil Canvas

Qu’est-ce que le HTML Canvas ?

L’élément HTML <canvas> offre un moyen puissant et flexible de dessiner des graphiques, des animations et d’autres éléments visuels sur une page web de manière dynamique en utilisant JavaScript. Considérez-le comme une surface de dessin bitmap dépendante de la résolution.

L’élément <canvas> lui-même n’est qu’un conteneur. Toutes les opérations de dessin sont effectuées à l’aide de JavaScript, généralement en accédant au contexte de rendu 2D du canvas (ou à WebGL pour les graphiques 3D).

L’API Canvas offre un riche ensemble de fonctions pour dessiner des chemins (lignes, formes), des rectangles, des cercles, du texte, et pour composer des images.

Support Navigateur

L’élément <canvas> est largement pris en charge par tous les navigateurs web modernes, y compris :

• Google Chrome (depuis la version 4.0+)
• Mozilla Firefox (depuis la version 2.0+)
• Microsoft Edge (toutes versions, et Internet Explorer depuis la version 9.0)
• Safari (depuis la version 3.1+)
• Opera (depuis la version 9.0+)

À des fins pratiques, vous pouvez considérer qu’il est entièrement pris en charge dans tout navigateur actuel. Les solutions de repli pour les très anciens navigateurs (comme le contenu textuel à l’intérieur des balises <canvas>) sont rarement nécessaires de nos jours.

Capacités Clés du HTML Canvas

Rendu de texte dynamique

Canvas permet de dessiner du texte personnalisable et coloré. Vous pouvez contrôler les polices, les tailles, les styles, l’alignement et appliquer des effets comme des ombres ou des dégradés aux éléments de texte, qui peuvent également être animés.

Graphiques complexes et visualisation de données

Canvas excelle dans la création de représentations graphiques complexes, telles que des diagrammes (à barres, linéaires, circulaires), des graphes et d’autres visualisations de données. Son contrôle au niveau du pixel permet des sorties visuelles détaillées et personnalisées.

Animations

Les objets Canvas peuvent être animés. En redessinant rapidement les scènes, vous pouvez créer n’importe quoi, des simples balles rebondissantes et effets de particules aux animations interactives complexes et séquences visuelles. requestAnimationFrame est la norme moderne pour des animations fluides sur canvas.

Interactivité

Les dessins sur Canvas peuvent réagir aux interactions utilisateur comme les clics de souris, les mouvements de souris, les entrées clavier et les événements tactiles. Cela permet la création de graphiques interactifs, d’applications de dessin et de jeux.

Développement de jeux

La combinaison des capacités de dessin, du contrôle d’animation et de l’interactivité fait de Canvas un choix populaire pour le développement de jeux 2D directement dans le navigateur sans dépendre de plugins externes.

Manipulation d’images

Canvas peut être utilisé pour charger, afficher et manipuler des images au niveau des pixels. Cela inclut le recadrage, le redimensionnement, le filtrage (par ex., niveaux de gris, sépia) et la composition de plusieurs images.

Structure de base du Canvas

Dans votre fichier HTML, un élément <canvas> est défini comme suit :

<canvas id="myCanvas" width="200" height="100">
  Votre navigateur ne prend pas en charge la balise HTML canvas.
</canvas>

Attributs clés :

• id : Essentiel pour référencer l’élément canvas depuis JavaScript.
• width : Définit la largeur de la surface de dessin du canvas en pixels CSS.
• height : Définit la hauteur de la surface de dessin du canvas en pixels CSS.

Important : Définissez toujours les attributs width et height directement sur la balise <canvas> elle-même, et non via CSS. Styliser la largeur et la hauteur du canvas avec CSS redimensionnera la surface de dessin, ce qui entraînera souvent des graphiques flous ou déformés. Les attributs définissent le nombre réel de pixels disponibles pour le dessin.

Conseil : Vous pouvez inclure un contenu de repli entre les balises <canvas> d’ouverture et de fermeture. Ce contenu sera affiché par les navigateurs qui ne prennent pas en charge le canvas (ce qui est très rare aujourd’hui).

Pour ajouter une bordure pour une clarté visuelle pendant le développement, vous pouvez utiliser CSS :

<!-- Dans votre fichier HTML -->
<canvas id="myCanvasWithBorder" width="200" height="100"></canvas>

<!-- Dans votre fichier CSS ou balise <style> -->
<style>
  #myCanvasWithBorder {
    border: 1px solid #000000; /* Bordure noire */
  }
</style>

Les chapitres suivants vous guideront sur la façon d’utiliser JavaScript pour dessiner sur cet élément canvas.