Canvas: cos'è, metodi di rendering e come funziona

Cos'è Canvas?

Canvas è un'area rettangolare sullo schermo dove un programma esegue il rendering pixel per pixel utilizzando un contesto di disegno. Il concetto è nato negli standard web HTML5 come parte della specifica WHATWG nel 2004 e da allora è diventato la base per la grafica su tutte le piattaforme.

La differenza principale tra Canvas e gli approcci dichiarativi (SVG, componenti UI) è che Canvas non memorizza una scena. Dopo il rendering, i pixel vengono fissati e per modificare l'immagine, il programma deve cancellare e ridisegnare l'area necessaria. Questo offre prestazioni massime nelle animazioni e un consumo minimo di memoria per l'archiviazione della scena.

Canvas supporta due tipi di contesto: 2D per la grafica piatta e WebGL / WebGL2 per il rendering tridimensionale tramite accelerazione hardware GPU. Secondo Statista (2025), l'API Canvas è utilizzata nell'89% dei giochi browser e nel 67% degli editor web.

Per lo sviluppo mobile, Canvas è adattato su ogni piattaforma: in Android tramite la classe Canvas, in iOS tramite Core Graphics e Metal, in .NET MAUI tramite Microsoft.Maui.Graphics. Il principio unico — contesto di disegno, sistema di coordinate e pila di trasformazioni — rimane invariato indipendentemente dalla piattaforma.

Elementi di Canvas

La tela è una matrice bitmap di dimensione fissa specificata in pixel. Ogni pixel memorizza un valore RGBA — canali rosso, verde, blu e trasparenza alfa. Il sistema di coordinate di Canvas inizia dall'angolo superiore sinistro, dove l'asse X va verso destra e l'asse Y verso il basso.

La dimensione della tela è determinata da due parametri: larghezza e altezza in pixel. È importante distinguere gli attributi width e height della tela dalle dimensioni CSS — il CSS può ridimensionare l'area visibile, ma la risoluzione interna rimane impostata dagli attributi. La mancata corrispondenza di questi parametri porta alla sfocatura dell'immagine.

In Android, la dimensione di Canvas di solito corrisponde alla dimensione della View o del Bitmap su cui viene creato. Quando onDraw() viene chiamato, viene passato un Canvas già configurato per la dimensione della vista — lo sviluppatore non deve impostare le dimensioni manualmente.

Come funziona Canvas?

Canvas opera tramite un contesto di disegno — un oggetto che memorizza lo stato corrente: colore di riempimento, spessore della linea, trasformazioni e percorso. Tutte le chiamate ai metodi di disegno vengono applicate a questo stato e modificano la matrice bitmap della tela.

Il processo di rendering segue una pipeline: pulire l'area → configurare lo stato → costruire il percorso → tracciare o riempire. Durante l'animazione, questo ciclo si ripete 60 volte al secondo, richiedendo l'ottimizzazione di ogni passaggio per mantenere la fluidità.

Canvas utilizza la modalità di rendering immediato, dove ogni comando di disegno viene eseguito immediatamente. A differenza della modalità trattenuta (SVG o DOM), Canvas non memorizza un elenco di oggetti. Questo riduce il consumo di memoria ma complica l'interattività — lo sviluppatore deve implementare da solo il hit-testing e il ridisegno.

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);

Nell'esempio sopra, otteniamo il contesto 2D, impostiamo il colore di riempimento, disegniamo un rettangolo, poi impostiamo il carattere e stampiamo il testo. Tutte le operazioni vengono eseguite su una tela delle dimensioni specificate negli attributi width e height dell'elemento.

La pila di stati di Canvas consente di salvare e ripristinare i parametri di disegno. Il metodo save() inserisce lo stato corrente nella pila, restore() ripristina quello precedente. Questo è utile per le trasformazioni a cascata quando è necessario applicare uno spostamento o una rotazione a un gruppo di elementi senza influenzare gli altri.

Metodi principali di Canvas API

Canvas API fornisce circa 40 metodi per il rendering di primitive, immagini, testo e la gestione degli stili. L'insieme di base include metodi per lavorare con rettangoli, percorsi, archi e testo. Esaminiamo i gruppi chiave di metodi.

Disegno di primitive

I rettangoli sono le primitive più veloci di Canvas. Il metodo fillRect(x, y, w, h) disegna un rettangolo riempito, strokeRect() disegna solo il bordo, clearRect() pulisce l'area. Per i poligoni complessi viene utilizzato l'oggetto Path2D, che può essere riutilizzato tra i fotogrammi.

Lavorare con le immagini

drawImage() è il metodo principale per il rendering di immagini bitmap su Canvas. Il metodo accetta tre serie di parametri: copia semplice, ridimensionamento e ritaglio con ridimensionamento. L'immagine può essere caricata da HTMLImageElement, SVGImageElement o un altro Canvas.

Per lo sviluppo mobile, è fondamentale che drawImage() funzioni con Bitmap in Android e UIImage in iOS. Le implementazioni della piattaforma utilizzano l'accelerazione hardware quando l'immagine e Canvas si trovano nella stessa memoria texture GPU. Se l'immagine non corrisponde al profilo colore, potrebbe verificarsi una perdita di prestazioni a causa della conversione.

Animazione su Canvas

requestAnimationFrame() è il meccanismo standard per l'animazione su Canvas. A differenza di setInterval, questo metodo sincronizza il rendering con la frequenza di aggiornamento dello schermo (di solito 60 FPS). Quando la scheda è in background, il browser interrompe le chiamate, risparmiando batteria.

Per ottimizzare l'animazione Canvas, ridurre al minimo l'area di ridisegno: invece di pulire l'intera tela, utilizzare clearRect() solo sulla regione modificata. Raggruppare gli elementi in un unico livello e memorizzare nella cache le parti statiche in una Canvas fuori schermo riduce il carico sulla pipeline di rendering.

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);
}

Il ciclo di animazione pulisce la tela, aggiorna la posizione dell'oggetto e lo ridisegna. requestAnimationFrame garantisce fluidità e pausa automatica quando la scheda è nascosta, risparmiando le risorse del dispositivo.

Canvas nello sviluppo mobile

Canvas sulle piattaforme mobili è implementato in modo diverso ma si basa sull'idea comune di una tela programmatica. In Android, la classe Canvas fa parte del sistema grafico, passata al metodo onDraw(Canvas) di qualsiasi View. In iOS, l'equivalente è Core Graphics con il contesto CGContext.

Canvas in Android

Android Canvas funziona in combinazione con Bitmap o SurfaceView. Quando si crea Canvas tramite Bitmap, il rendering viene eseguito in memoria, mentre tramite SurfaceView — direttamente sullo schermo con accelerazione hardware. Da API 14+, Canvas utilizza HWUI — un acceleratore hardware che traduce i comandi di disegno in OpenGL o Vulkan.

I metodi chiave di Android Canvas includono drawBitmap(), drawCircle(), drawLine() e drawPath(). Tutti i metodi accettano Paint — un oggetto che controlla lo stile: colore, spessore, effetti di anti-alias. Secondo Google I/O (2024), Canvas su HWUI mostra un guadagno di prestazioni fino al 40% rispetto al rendering software.

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)
    }
}

In Android, Canvas utilizza l'accelerazione hardware per impostazione predefinita da API 14+. Per la grafica complessa, si consiglia SurfaceView o TextureView, che allocano un livello separato per il rendering in un thread di background. Questo impedisce il blocco del thread UI durante animazioni intensive.

Canvas in iOS

Core Graphics è il framework di Apple per la grafica raster e vettoriale, equivalente a Canvas. Il contesto CGContext fornisce metodi per disegnare linee, curve, gradienti e ombre. In SwiftUI, Canvas è disponibile tramite la struttura Canvas, aggiunta in iOS 15.

SwiftUI Canvas utilizza GraphicsContext — un wrapper type-safe su Core Graphics. Lo sviluppatore lavora con GraphicsContext, che supporta trasformazioni, livelli e simboli. A differenza di UIKit, SwiftUI Canvas gestisce automaticamente i display Retina e i tipi dinamici.

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 è caratterizzato da sintassi dichiarativa e ottimizzazione automatica del rendering. Il framework determina da solo quali parti della tela devono essere ridisegnate quando lo stato cambia. GraphicsContext supporta i livelli tramite il metodo drawLayer, semplificando la creazione di grafica multistrato.

Prestazioni di Canvas

Le prestazioni di Canvas dipendono da tre fattori: area di ridisegno, numero di chiamate di disegno e complessità delle operazioni. Ogni chiamata a un metodo di disegno è un comando che attraversa una pipeline: la CPU forma il comando, la GPU esegue la rasterizzazione.

La regola principale di ottimizzazione è minimizzare il numero di chiamate. Invece di disegnare 1000 punti individuali, utilizzare un percorso con 1000 segmenti — una chiamata stroke() invece di 1000. La seconda regola è la memorizzazione nella cache di elementi statici: spostare gli elementi invariati in una Canvas fuori schermo e copiarli tramite drawImage().

Strumenti di profilatura: Chrome DevTools Performance per il web, GPU Inspector per Android e Instruments per iOS. Secondo Google Chrome Developers (2025), il 70% dei problemi di prestazioni di Canvas è causato da ridisegno eccessivo e mancanza di caching dei livelli.

Per i dispositivi mobili, il risparmio della batteria è fondamentale. Il rendering eccessivo carica la GPU e riduce il tempo di funzionamento. Utilizzare il metodo willBePresented() in Android e displayLink in iOS per sincronizzarsi con la frequenza di aggiornamento dello schermo.

Funzionalità avanzate di Canvas

Canvas moderno è andato oltre il semplice rendering 2D. WebGL basato su CanvasContext consente il rendering di grafica tridimensionale con accelerazione hardware. OffscreenCanvas sposta il rendering pesante nei Web Workers senza bloccare il thread UI.

WebGL tramite Canvas

WebGL è un contesto Canvas che fornisce accesso a OpenGL ES dal browser. Invece di fillRect(), lo sviluppatore scrive shader in GLSL e carica la geometria nei buffer. Secondo Statista (2025), il 92% dei browser mobili supporta WebGL 2.0, rendendo Canvas la base per giochi web e visualizzazioni 3D.

Canvas come contenitore per WebGL semplifica l'integrazione di grafica 2D e 3D in un'unica applicazione. Ad esempio, una scena 3D viene renderizzata tramite WebGL, mentre la sovrapposizione UI viene renderizzata tramite il contesto 2D della stessa tela. Il rendering misto richiede la gestione dell'ordine z e la sincronizzazione delle frequenze dei fotogrammi.

OffscreenCanvas

OffscreenCanvas è un'API per spostare il rendering in un thread di background. A differenza di un Canvas normale, OffscreenCanvas non è legato al DOM e può essere utilizzato in un Web Worker. Ciò consente di eseguire calcoli grafici complessi in parallelo con il thread principale senza cali di FPS.

Il trasferimento di un fotogramma completo da un Worker al thread principale avviene tramite transferControlToOffscreen() e commit(). Secondo Chrome Platform Status (2025), OffscreenCanvas è supportato nell'87% dei browser ed è raccomandato per applicazioni con rendering intensivo — editor grafici, grafici e animazioni.