Tutoriel canvas
<canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.
Ce tutoriel explique comment utiliser l'élément <canvas> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.
D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <canvas> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.
Avant de commencer
L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément <canvas> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTML height et width. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.