Canvas : définition, méthodes de rendu et fonctionnement

Qu'est-ce que Canvas ?

Canvas est une zone rectangulaire à l'écran où un programme effectue un rendu pixel par pixel à l'aide d'un contexte de dessin. Le concept est né dans les standards web HTML5 dans le cadre de la spécification WHATWG en 2004 et est depuis devenu la base des graphiques sur toutes les plateformes.

La principale différence entre Canvas et les approches déclaratives (SVG, composants d'interface) est que Canvas ne stocke pas de scène. Après le rendu, les pixels sont fixés et pour modifier l'image, le programme doit effacer et redessiner la zone nécessaire. Cela offre des performances maximales dans les animations et une consommation mémoire minimale pour le stockage de la scène.

Canvas prend en charge deux types de contexte : 2D pour les graphiques plats et WebGL / WebGL2 pour le rendu tridimensionnel via l'accélération matérielle GPU. Selon Statista (2025), l'API Canvas est utilisée dans 89% des jeux navigateur et 67% des éditeurs web.

Pour le développement mobile, Canvas est adapté sur chaque plateforme : sous Android via la classe Canvas, sous iOS via Core Graphics et Metal, dans .NET MAUI via Microsoft.Maui.Graphics. Le principe unique — contexte de dessin, système de coordonnées et pile de transformations — reste inchangé quelle que soit la plateforme.

Éléments de Canvas

La toile est une matrice bitmap de taille fixe spécifiée en pixels. Chaque pixel stocke une valeur RGBA — canaux rouge, vert, bleu et transparence alpha. Le système de coordonnées de Canvas commence dans le coin supérieur gauche, où l'axe X va vers la droite et l'axe Y vers le bas.

La taille de la toile est déterminée par deux paramètres : largeur et hauteur en pixels. Il est important de distinguer les attributs width et height de la toile des dimensions CSS — le CSS peut mettre à l'échelle la zone visible, mais la résolution interne reste définie par les attributs. La non-concordance de ces paramètres entraîne un flou de l'image.

Sous Android, la taille de Canvas correspond généralement à la taille de la View ou du Bitmap sur lequel il est créé. Lorsque onDraw() est appelé, un Canvas déjà configuré à la taille de la vue est passé — le développeur n'a pas besoin de définir les dimensions manuellement.

Comment fonctionne Canvas ?

Canvas fonctionne via un contexte de dessin — un objet qui stocke l'état actuel : couleur de remplissage, épaisseur de ligne, transformations et chemin. Tous les appels aux méthodes de dessin sont appliqués à cet état et modifient la matrice bitmap de la toile.

Le processus de rendu suit un pipeline : nettoyer la zone → configurer l'état → construire le chemin → tracer ou remplir. Pendant l'animation, ce cycle se répète 60 fois par seconde, ce qui nécessite une optimisation de chaque étape pour maintenir la fluidité.

Canvas utilise le mode de rendu immédiat, où chaque commande de dessin est exécutée immédiatement. Contrairement au mode retainé (SVG ou DOM), Canvas ne stocke pas de liste d'objets. Cela réduit la consommation mémoire mais complique l'interactivité — le développeur doit implémenter lui-même le test de collision et le redessinage.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

Dans l'exemple ci-dessus, nous obtenons le contexte 2D, définissons la couleur de remplissage, dessinons un rectangle, puis définissons la police et affichons du texte. Toutes les opérations sont effectuées sur une toile de la taille spécifiée dans les attributs width et height de l'élément.

La pile d'états de Canvas permet de sauvegarder et de restaurer les paramètres de dessin. La méthode save() place l'état actuel sur la pile, restore() restaure l'état précédent. Ceci est pratique pour les transformations en cascade lorsque vous devez appliquer un décalage ou une rotation à un groupe d'éléments sans affecter les autres.

Méthodes principales de Canvas API

Canvas API fournit environ 40 méthodes pour le rendu de primitives, d'images, de texte et la gestion des styles. L'ensemble de base comprend des méthodes pour travailler avec des rectangles, des chemins, des arcs et du texte. Examinons les groupes clés de méthodes.

Dessin de primitives

Les rectangles sont les primitives les plus rapides de Canvas. La méthode fillRect(x, y, w, h) dessine un rectangle rempli, strokeRect() dessine uniquement le bord, clearRect() nettoie la zone. Pour les polygones complexes, l'objet Path2D est utilisé et peut être réutilisé entre les images.

Travail avec les images

drawImage() est la méthode principale pour rendre des images bitmap sur Canvas. La méthode accepte trois ensembles de paramètres : copie simple, mise à l'échelle et recadrage avec mise à l'échelle. L'image peut être chargée depuis HTMLImageElement, SVGImageElement ou un autre Canvas.

Pour le développement mobile, il est essentiel que drawImage() fonctionne avec Bitmap sous Android et UIImage sous iOS. Les implémentations de plateforme utilisent l'accélération matérielle lorsque l'image et le Canvas se trouvent dans la même mémoire de texture GPU. Si l'image ne correspond pas au profil colorimétrique, une perte de performance peut survenir en raison de la conversion.

Animation sur Canvas

requestAnimationFrame() est le mécanisme standard pour l'animation sur Canvas. Contrairement à setInterval, cette méthode synchronise le rendu avec la fréquence de rafraîchissement de l'écran (généralement 60 FPS). Lorsque l'onglet est en arrière-plan, le navigateur arrête les appels, économisant la batterie.

Pour optimiser l'animation Canvas, minimisez la zone de redessinage : au lieu de nettoyer toute la toile, utilisez clearRect() uniquement sur la région modifiée. Grouper les éléments en une seule couche et mettre en cache les parties statiques dans un Canvas hors écran réduit la charge sur le pipeline de rendu.

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

La boucle d'animation nettoie la toile, met à jour la position de l'objet et le redessine. requestAnimationFrame garantit la fluidité et une pause automatique lors du masquage de l'onglet, économisant les ressources de l'appareil.

Canvas dans le développement mobile

Canvas sur les plateformes mobiles est implémenté différemment mais repose sur l'idée commune d'une toile programmatique. Sous Android, la classe Canvas fait partie du système graphique, transmise à la méthode onDraw(Canvas) de toute View. Sous iOS, l'équivalent est Core Graphics avec le contexte CGContext.

Canvas sous Android

Android Canvas fonctionne en conjonction avec Bitmap ou SurfaceView. Lors de la création de Canvas via Bitmap, le rendu s'effectue en mémoire, tandis que via SurfaceView — directement à l'écran avec accélération matérielle. À partir de l'API 14+, Canvas utilise HWUI — un accélérateur matériel qui traduit les commandes de dessin en OpenGL ou Vulkan.

Les méthodes clés d'Android Canvas incluent drawBitmap(), drawCircle(), drawLine() et drawPath(). Toutes les méthodes acceptent Paint — un objet qui contrôle le style : couleur, épaisseur, effets d'anti-crénelage. Selon Google I/O (2024), Canvas sur HWUI montre un gain de performance allant jusqu'à 40% par rapport au rendu logiciel.

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

Sous Android, Canvas utilise l'accélération matérielle par défaut à partir de l'API 14+. Pour les graphiques complexes, il est recommandé d'utiliser SurfaceView ou TextureView, qui allouent une couche séparée pour le rendu dans un thread d'arrière-plan. Cela évite le blocage du thread d'interface utilisateur lors d'animations intensives.

Canvas sous iOS

Core Graphics est le framework d'Apple pour les graphiques raster et vectoriels, équivalent à Canvas. Le contexte CGContext fournit des méthodes pour dessiner des lignes, des courbes, des dégradés et des ombres. Dans SwiftUI, Canvas est disponible via la structure Canvas, ajoutée dans iOS 15.

SwiftUI Canvas utilise GraphicsContext — un wrapper type-safe sur Core Graphics. Le développeur travaille avec GraphicsContext, qui prend en charge les transformations, les couches et les symboles. Contrairement à UIKit, SwiftUI Canvas gère automatiquement les écrans Retina et les types dynamiques.

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

SwiftUI Canvas se caractérise par une syntaxe déclarative et une optimisation automatique du rendu. Le framework détermine lui-même quelles parties de la toile doivent être redessinées lors d'un changement d'état. GraphicsContext prend en charge les couches via la méthode drawLayer, simplifiant la création de graphiques multicouches.

Performances de Canvas

Les performances de Canvas dépendent de trois facteurs : la zone de redessinage, le nombre d'appels de dessin et la complexité des opérations. Chaque appel de méthode de dessin est une commande qui traverse un pipeline : le CPU forme la commande, le GPU effectue la rastérisation.

La règle principale d'optimisation est de minimiser le nombre d'appels. Au lieu de dessiner 1000 points individuels, utilisez un chemin avec 1000 segments — un appel stroke() au lieu de 1000. La deuxième règle est la mise en cache des éléments statiques : déplacez les éléments inchangés dans un Canvas hors écran et copiez-les via drawImage().

Outils de profilage : Chrome DevTools Performance pour le web, GPU Inspector pour Android et Instruments pour iOS. Selon Google Chrome Developers (2025), 70% des problèmes de performance de Canvas sont causés par un redessinage excessif et un manque de mise en cache des couches.

Pour les appareils mobiles, l'économie de batterie est cruciale. Un rendu excessif charge le GPU et réduit l'autonomie. Utilisez la méthode willBePresented() sous Android et displayLink sous iOS pour synchroniser avec la fréquence de rafraîchissement de l'écran.

Fonctionnalités avancées de Canvas

Canvas moderne a dépassé le simple rendu 2D. WebGL basé sur CanvasContext permet de rendre des graphiques tridimensionnels avec accélération matérielle. OffscreenCanvas déplace le rendu lourd vers les Web Workers sans bloquer le thread d'interface utilisateur.

WebGL via Canvas

WebGL est un contexte Canvas qui fournit un accès à OpenGL ES depuis le navigateur. Au lieu de fillRect(), le développeur écrit des shaders en GLSL et charge la géométrie dans des tampons. Selon Statista (2025), 92% des navigateurs mobiles prennent en charge WebGL 2.0, faisant de Canvas la base des jeux web et des visualisations 3D.

Canvas comme conteneur pour WebGL simplifie l'intégration de graphiques 2D et 3D dans une seule application. Par exemple, une scène 3D est rendue via WebGL, tandis que la superposition d'interface utilisateur est rendue via le contexte 2D de la même toile. Le rendu mixte nécessite la gestion de l'ordre z et la synchronisation des fréquences d'images.

OffscreenCanvas

OffscreenCanvas est une API pour déplacer le rendu vers un thread d'arrière-plan. Contrairement à un Canvas normal, OffscreenCanvas n'est pas lié au DOM et peut être utilisé dans un Web Worker. Cela permet d'effectuer des calculs graphiques complexes en parallèle avec le thread principal sans chute de FPS.

Le transfert d'une image complète d'un Worker vers le thread principal se fait via transferControlToOffscreen() et commit(). Selon Chrome Platform Status (2025), OffscreenCanvas est pris en charge dans 87% des navigateurs et est recommandé pour les applications à rendu intensif — éditeurs graphiques, graphiques et animations.