Les raisons d’assembler plusieurs canvases les uns sur les autres sont nombreuses et toutes partent d’une même idée: chaque canvas possède son propre contexte 2D et il n’y a qu’un seul objet CanvasRenderingContext2D par canvas, ainsi l’appel de getContext() avec l’argument 2d doit renvoyer le même objet sur ce canvas. L’un des usages typiques des couches est l’animation.
Pourquoi superposer des canvases?
Quand on empile des feuilles transparentes pour dessiner des animations, on peut ne redessiner que les parties qui bougent. De la même manière, en web, plusieurs canvases superposés permettent de limiter les redraws et d’obtenir des performances supérieures, notamment pour les arrière-plans statiques, les éléments mobiles et les effets visuels séparés.
Le recours à plusieurs canvases permet aussi de transformer les systèmes de coordonnées et de gérer des animations plus complexes: on peut faire tourner un élément sur le premier plan pendant que le fond reste inchangé sur un autre canvas.
Exemple pratique et structure du code
Le code pour cet exemple est pleinement expliqué et montre comment utiliser des couches tout en conservant une logique claire: nous transformons le système de coordonnées et faisons tourner un carré basé sur une variable globale utilisée dans la couche 1; nous utilisons aussi le CSS pour fixer le z-index de nos canvases afin d’obtenir l’effet de superposition souhaité.
La balise canvas agit comme une surface de dessin rapide et les API JavaScript associées permettent un rendu performant. Le dessin fait appel à différentes méthodes géométriques simples et des chemins pour tracer les formes complexes. Le cadre initial est dessiné par la méthode strokeRect() qui trace les contours sans couleur ni épaisseur prédéfinis, et d’autres méthodes comme fillRect() et clearRect() complètent l’arsenal.
Un chemin est une forme définie point par point et commence avec beginPath(). La suite des tracés peut être enchaînée, et closePath() termine le chemin, ce qui permet de créer des motifs fermés. Pour dessiner des courbes, on utilise moveTo() pour placer le point de départ, puis bezierCurveTo() pour une courbe de Bézier, utile pour des formes lisses et esthétiques dans le logo ou les dessins.
Le texte peut être dessiné directement sur la toile avec fillText(), et strokeText() offre le contour des caractères. Les dimensions de la toile s’expriment en pixels et peuvent être déclarées directement dans la balise canvas ou dans le script; les dimensions CSS n’affectent que le rendu visuel et non la résolution réelle du canvas. Cela garantit un rendu net et prévisible sur les différents navigateurs et appareils.
Intégration des couches et contrôles
Pour faciliter le découpage visuel et les transitions, on peut écrire certaines parties du dessin autour du centre de la toile en utilisant canvas.width / 2 et canvas.height / 2. Des éléments typographiques, comme les lettres du logo, peuvent être positionnés de manière symétrique par rapport à ce point central afin d’obtenir un rendu harmonieux.
Les canvases n’en sont pas encore à l’étape d’outillage graphique comme un éditeur Flash, mais ils offrent une souplesse et un contrôle très important. Parmi les possibilités non abordées dans l’exemple, on compte les animations avancées, la gestion des images, les ombrages, la transparence, les masques, et le contrôle du clavier et de la souris, ainsi que la gestion de vidéos et de sons qui peuvent être intégrés via plusieurs canvases.
Interactivité et performances
Utiliser plusieurs canvases peut améliorer les performances lorsque des éléments distincts nécessitent des révisions indépendantes. Par exemple, un canvas peut être dédié à l’arrière-plan statique, un autre à l’animation principale et un troisième à des effets spéciaux ou des surcroisements. Le rendu reste fluide en ne réécrivant que ce qui est nécessaire sur chaque couche.
Des techniques comme l’observation d’intersections avec IntersectionObserver peuvent être utilisées pour optimiser le chargement et la mise à jour des canvases visibles, en évitant le calcul et le dessin sur des éléments hors écran. Ainsi, chaque couche peut être actualisée selon des conditions spécifiques tout en conservant la synchronisation générale du rendu.
Note: la coordination entre les couches doit être pensée pour éviter les redessinages inutiles et s’assurer que les transformations appliquées à une couche n’altèrent pas involontairement les autres.
Animation simple sur Canva : Tutoriel Canva pour débutants
Récapitulatif des concepts clés
- Un CanvasRenderingContext2D par canvas; chaque canvas a son propre contexte.
- Utiliser plusieurs canvases permet de séparer les parties statiques et dynamiques de l’animation.
- Les transformations et les rotations peuvent être appliquées sur des couches spécifiques sans impacter les autres.
- Le CSS une variable essentielle: le z-index pour ordonner les couches visuelles.
- Les méthodes de dessin de base (strokeRect, fillRect, beginPath, moveTo, bezierCurveTo, fillText, strokeText) permettent de construire des scènes complexes.
Tableau récapitulatif des interactions entre couches
| Cas d’usage | Avantages | Considérations |
|---|---|---|
| Arrière-plan statique | Réduction des redraws | Mise à jour minimale nécessaire |
| Éléments mobiles | Couche indépendante pour l’animation | Synchronisation temporelle |
| Effets visuels | Effets sur couche dédiée | Gestion des modes de blend |