Tuto Canvas : Présentation

L’élément <canvas> représente une zone de dessin pouvant dessiner au sein de la page web, à l'intérieur de la balise HTML <canvas>. On peut dessiner des formes (triangles, cercles...) aussi ajouter des images, appliquer des filtres graphiques et d’effets... en utilisant l'API qui met à disposition des méthodes accessibles en JavaScript.

Cela nous permet de réaliser des applications graphiques directement dans des pages web.
Autrement, il s’agit d’un espace de pixels pour réaliser des fonctions graphiques.

L’élément lui-même est très simple. Il suffit d’en spécifier les dimensions dans la balise d’ouverture :

<canvas id="mon-canvas" width="360" height="300">
</canvas>

Côté JavaScript, pour accéder à la surface de dessin de cet élément HTML. Deux fonctions sont appelées :

• getElementById(): Permet d'aller chercher l'élément <canvas> identifié par l’attribut id.

• getContext(): Spécifier dans quel contexte de dessin le script va agir (2D ou 3D).

<script type="text/javascript">
  var canvas = document.getElementById("mon_canvas");
  var contexte = canvas.getContext("2d");
  // Le reste du script ici...
</script>