HTML5 Canvas - 1 Créer son premier canvas en HTML5

Cette leçon lance la série sur le canvas HTML5. Le canvas est une zone de dessin placée dans une page web. Nous commençons par préparer l'environnement de travail, puis par créer la page HTML et la feuille de style qui affichent la toile. Ces bases serviront à toutes les leçons suivantes.

Les prérequis

Il faut d'abord un éditeur de texte. La vidéo utilise Visual Studio Code, à télécharger depuis le site officiel.

Le navigateur doit être compatible avec HTML5, ce que la vidéo précédente permet de vérifier. JavaScript doit aussi être activé dans ce navigateur.

Préparer les fichiers et l'extension Live Server

Créez un dossier sur le bureau, puis ouvrez-le dans Visual Studio Code. Dans ce dossier, créez deux fichiers : index.html pour la page et style.css pour le style.

Installez ensuite l'extension Live Server depuis l'onglet des extensions. Elle permet d'ouvrir la page dans le navigateur.

• Ouvrir l'onglet Extensions.
• Rechercher Live Server.
• Cliquer sur Installer.

Écrire la page HTML et le style CSS

Dans index.html, créez une page HTML de base. Indiquez que la langue est le français, donnez un titre à la page, puis placez la balise canvas. Cette balise reçoit un identifiant qui permet de la retrouver dans le style.

Ajoutez aussi un message qui s'affiche si le navigateur n'est pas compatible avec HTML5. Reliez ensuite la page au fichier style.css.

Dans style.css, le sélecteur reprend l'identifiant du canvas, précédé du dièse. La vidéo applique une bordure noire d'un pixel, un affichage en bloc, une largeur et une hauteur de 600 pixels, puis une marge automatique pour centrer la toile.

#<id-du-canvas> {
  border: 1px solid black;
  display: block;
  width: 600px;
  height: 600px;
  margin: auto;
}

Lancer la page avec Live Server

Enregistrez les deux fichiers. Faites un clic droit sur index.html, puis choisissez l'option Open with Live Server.

La page s'ouvre dans le navigateur et la toile apparaît avec sa bordure. La leçon suivante permet d'interagir avec cette toile.

En résumé

Pour dessiner sur un canvas HTML5, il faut une page HTML, une feuille de style et un moyen de la lancer dans le navigateur. Visual Studio Code et Live Server permettent de réaliser ces étapes simplement. La balise canvas apparaît avec une taille de 600 pixels sur 600 pixels, centrée et entourée d'une bordure noire.

Points clés

• Un canvas est une zone de dessin placée dans une page HTML.
• Visual Studio Code est l'éditeur utilisé dans la vidéo.
• L'extension Live Server ouvre la page dans le navigateur.
• Le style CSS donne au canvas une taille de 600 pixels sur 600 pixels.
• Le message de secours s'affiche pour les navigateurs non compatibles avec HTML5.

Questions fréquentes

Pourquoi le navigateur doit-il être compatible HTML5 ?

Le canvas fait partie de HTML5. Un navigateur plus ancien ne peut pas afficher la zone de dessin et affiche le message de secours.

À quoi sert l'extension Live Server ?

Elle ouvre la page HTML dans le navigateur pour afficher le résultat. Il suffit de faire un clic droit sur index.html.

Pourquoi relier la page HTML au fichier CSS ?

Le lien permet au navigateur d'appliquer les règles de style à la page, donc à la toile.