Canvas: wat is het, rendermethodes en hoe het werkt

Wat is Canvas?

Canvas is een rechthoekig gebied op het scherm waarin het programma pixel-voor-pixel weergave uitvoert met behulp van een tekencontext. Het concept is ontstaan in de HTML5-webstandaarden als onderdeel van de WHATWG-specificatie in 2004 en is sindsdien de basis geworden voor graphics op alle platforms.

Het belangrijkste verschil tussen Canvas en declaratieve benaderingen (SVG, UI-componenten) is dat Canvas geen scene opslaat. Na het renderen worden pixels vastgelegd en om de afbeelding te wijzigen, moet het programma het benodigde gebied wissen en opnieuw tekenen. Dit geeft maximale prestaties bij animatie en minimaal geheugengebruik voor het opslaan van de scene.

Canvas ondersteunt twee soorten context: 2D voor platte graphics en WebGL / WebGL2 voor driedimensionale weergave via hardwareversnelling van de GPU. Volgens Statista (2025) wordt Canvas API gebruikt in 89% van de browsergames en 67% van de webeditors.

Voor mobiele ontwikkeling is Canvas op elk platform aangepast: in Android via de gelijknamige klasse Canvas, in iOS via Core Graphics en Metal, in .NET MAUI via Microsoft.Maui.Graphics. Het uniforme principe — tekencontext, coördinatensysteem en transformatiestack — blijft ongewijzigd, ongeacht het platform.

Canvas-elementen

Het doek is een bitmatrix van vaste grootte, opgegeven in pixels. Elke pixel slaat een RGBA-waarde op — rode, groene, blauwe kanalen en alfa-transparantie. Het Canvas-coördinatensysteem begint in de linkerbovenhoek, waar de X-as naar rechts gaat en de Y-as naar beneden.

De grootte van het doek wordt bepaald door twee parameters: breedte en hoogte in pixels. Het is belangrijk om onderscheid te maken tussen de width- en height-attributen van het doek en de CSS-afmetingen — CSS kan het zichtbare gebied schalen, maar de interne resolutie blijft zoals ingesteld door de attributen. Het niet overeenkomen van deze parameters leidt tot vervaging van de afbeelding.

In Android komt de grootte van Canvas meestal overeen met de grootte van de View of Bitmap waarop het is gemaakt. Bij onDraw() wordt een Canvas doorgegeven dat al is ingesteld op de afmetingen van de view — de ontwikkelaar hoeft de afmetingen niet handmatig in te stellen.

Hoe werkt Canvas?

Canvas werkt via een tekencontext — een object dat de huidige status opslaat: vulkleur, lijndikte, transformaties en pad. Alle aanroepen van tekenmethodes worden toegepast op deze status en wijzigen de bitmatrix van het doek.

Het renderproces volgt een pipeline: gebied wissen → status instellen → pad opbouwen → contour of vulling. Bij animatie wordt deze cyclus 60 keer per seconde herhaald, wat optimalisatie van elke stap vereist om vloeiendheid te behouden.

Canvas gebruikt immediate mode rendering — onmiddellijke modus, waarbij elk tekencommando direct wordt uitgevoerd. In tegenstelling tot retained mode (SVG of DOM), slaat Canvas geen lijst met objecten op. Dit vermindert het geheugengebruik, maar maakt interactiviteit complexer — de ontwikkelaar implementeert zelf hit-testing en hertekenen.

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

In bovenstaand voorbeeld verkrijgen we de 2D-context, stellen we de vulkleur in, tekenen we een rechthoek, vervolgens stellen we het lettertype in en geven we tekst weer. Alle bewerkingen worden uitgevoerd op het doek met de grootte zoals gespecificeerd in de width en height attributen van het element.

De Canvas-statusstack maakt het mogelijk om tekenparameters op te slaan en te herstellen. De methode save() plaatst de huidige status op de stack, restore() herstelt de vorige. Dit is handig bij cascade-transformaties, wanneer een verschuiving of rotatie moet worden toegepast op een groep elementen zonder de andere te beïnvloeden.

Belangrijkste methodes van Canvas API

Canvas API biedt ongeveer 40 methodes voor het renderen van primitieven, afbeeldingen, tekst en het beheren van stijlen. De basisset bevat methodes voor het werken met rechthoeken, paden, bogen en tekst. Laten we de belangrijkste groepen methodes bekijken.

Primitieven tekenen

Rechthoeken — de snelste primitieven van Canvas. De methode fillRect(x, y, w, h) tekent een gevulde rechthoek, strokeRect() — alleen de rand, clearRect() — wist het gebied. Voor complexe veelhoeken wordt het Path2D-object gebruikt, dat tussen frames opnieuw kan worden gebruikt.

Werken met afbeeldingen

drawImage() — de belangrijkste methode voor het renderen van rasterafbeeldingen op Canvas. De methode accepteert drie sets parameters: eenvoudig kopiëren, schalen en bijsnijden met schalen. De afbeelding kan worden geladen vanuit een HTMLImageElement, SVGImageElement of een andere Canvas.

Voor mobiele ontwikkeling is het cruciaal dat drawImage() werkt met Bitmap in Android en UIImage in iOS. Platformimplementaties gebruiken hardwareversnelling wanneer de afbeelding en Canvas zich in hetzelfde GPU-textuurgeheugen bevinden. Als de afbeelding niet overeenkomt qua kleurprofiel, is prestatieverlies door conversie mogelijk.

Animatie op Canvas

requestAnimationFrame() — het standaardmechanisme voor Canvas-animatie. In tegenstelling tot setInterval synchroniseert deze methode de weergave met de verversingssnelheid van het scherm (meestal 60 FPS). Wanneer het tabblad op de achtergrond staat, stopt de browser de aanroepen om batterij te sparen.

Voor optimalisatie van Canvas-animatie moet het hertekengebied worden geminimaliseerd: gebruik in plaats van het hele doek te wissen clearRect() alleen op het gewijzigde gebied. Het groeperen van elementen in één laag en het cachen van statische delen in offscreen Canvas verminderen de belasting van de renderpipeline.

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

De animatiecyclus wist het doek, werkt de positie van het object bij en tekent het opnieuw. requestAnimationFrame garandeert vloeiendheid en automatische pauze bij het verbergen van het tabblad, wat apparaatbronnen spaart.

Canvas in mobiele ontwikkeling

Canvas is op mobiele platforms verschillend geïmplementeerd, maar is gebaseerd op het gemeenschappelijke idee van een programmatisch doek. In Android maakt de Canvas-klasse deel uit van het grafische systeem, doorgegeven aan de methode onDraw(Canvas) van elke View. In iOS is het equivalent Core Graphics met de CGContext-context.

Canvas in Android

Android Canvas werkt samen met Bitmap of SurfaceView. Bij het maken van Canvas via Bitmap wordt de weergave naar het geheugen uitgevoerd, en via SurfaceView — direct naar het scherm met hardwareversnelling. Vanaf API 14+ gebruikt Canvas HWUI — de hardwareversneller die tekenopdrachten vertaalt naar OpenGL of Vulkan.

Belangrijke methodes van Android Canvas zijn drawBitmap(), drawCircle(), drawLine() en drawPath(). Alle methodes accepteren Paint — een object dat de stijl beheert: kleur, dikte, anti-aliasing effecten. Volgens Google I/O (2024) toont Canvas op HWUI een prestatieverbetering tot 40% in vergelijking met software-rendering.

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 gebruikt Canvas standaard hardwareversnelling vanaf API 14+. Voor complexe graphics wordt SurfaceView of TextureView aanbevolen, die een aparte laag toewijzen voor weergave in een achtergrondthread. Dit voorkomt het blokkeren van de UI-thread bij intensieve animatie.

Canvas in iOS

Core Graphics — het Apple-framework voor raster- en vector graphics, het equivalent van Canvas. De CGContext-context biedt methodes voor het tekenen van lijnen, curven, gradienten en schaduwen. In SwiftUI is Canvas beschikbaar via de structuur Canvas, toegevoegd in iOS 15.

SwiftUI Canvas gebruikt GraphicsContext — een type-veilige wrapper rond Core Graphics. De ontwikkelaar werkt met GraphicsContext, dat transformaties, lagen en symbolen ondersteunt. In tegenstelling tot UIKit verwerkt SwiftUI Canvas automatisch Retina-schermen en dynamische typen.

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 onderscheidt zich door declaratieve syntax en automatische optimalisatie van de weergave. Het framework bepaalt zelf welke delen van het doek opnieuw moeten worden getekend bij statuswijziging. GraphicsContext ondersteunt lagen via de methode drawLayer, wat het maken van meerlaagse graphics vereenvoudigt.

Canvas prestaties

Canvas prestaties zijn afhankelijk van drie factoren: het hertekengebied, het aantal tekenaanroepen en de complexiteit van bewerkingen. Elke aanroep van een tekenmethode is een opdracht die door de pipeline gaat: de CPU vormt de opdracht, de GPU voert de rasterisatie uit.

De basisregel van optimalisatie — minimalisatie van het aantal aanroepen. Gebruik in plaats van 1000 afzonderlijke punten te tekenen een pad met 1000 segmenten — één stroke()-aanroep in plaats van 1000. De tweede regel — cachen van statische elementen: verplaats onveranderlijke elementen naar offscreen Canvas en kopieer via drawImage().

Profileringstools: Chrome DevTools Performance voor web, GPU Inspector voor Android en Instruments voor iOS. Volgens Google Chrome Developers (2025) wordt 70% van de Canvas-prestatieproblemen veroorzaakt door overmatig hertekenen en het ontbreken van laagcaching.

Voor mobiele apparaten is batterijbesparing cruciaal. Overmatige weergave belast de GPU en verkort de gebruiksduur. Gebruik de methode willBePresented() in Android en displayLink in iOS voor synchronisatie met de verversingssnelheid van het scherm.

Geavanceerde mogelijkheden van Canvas

Modern Canvas is verder gegaan dan eenvoudige 2D-weergave. WebGL op basis van CanvasContext maakt het mogelijk om driedimensionale graphics te renderen met hardwareversnelling. OffscreenCanvas verplaatst zware weergave naar Web Workers zonder de UI-thread te blokkeren.

WebGL via Canvas

WebGL is een Canvas-context die toegang biedt tot OpenGL ES vanuit de browser. In plaats van fillRect() schrijft de ontwikkelaar shaders in GLSL en laadt geometrie in buffers. Volgens Statista (2025) ondersteunt 92% van de mobiele browsers WebGL 2.0, wat Canvas de basis maakt voor webgames en 3D-visualisaties.

Canvas als container voor WebGL vereenvoudigt de integratie van 2D- en 3D-graphics in één applicatie. Bijvoorbeeld, de 3D-scene wordt gerenderd via WebGL en de UI-overlay via de 2D-context van hetzelfde doek. Gemengde weergave vereist beheer van de Z-volgorde en synchronisatie van de framesnelheid.

OffscreenCanvas

OffscreenCanvas — API voor het verplaatsen van weergave naar een achtergrondthread. In tegenstelling tot gewone Canvas is OffscreenCanvas niet gebonden aan de DOM en kan worden gebruikt in een Web Worker. Dit maakt het mogelijk om complexe grafische berekeningen parallel aan de hoofdthread uit te voeren zonder FPS-verlies.

Het overbrengen van een voltooid frame van de Worker naar de hoofdthread gebeurt via transferControlToOffscreen() en commit(). Volgens Chrome Platform Status (2025) wordt OffscreenCanvas ondersteund in 87% van de browsers en aanbevolen voor toepassingen met intensieve weergave — grafische editors, diagrammen en animaties.