Canvas: vad det är, renderingsmetoder och hur det fungerar

Vad är Canvas?

Canvas är ett rektangulärt område på skärmen där programmet utför pixel-för-pixel-rendering med hjälp av en ritkontext. Konceptet föddes i HTML5-webbstandarder som en del av WHATWG-specifikationen 2004 och har sedan dess blivit grunden för grafik på alla plattformar.

Den största skillnaden mellan Canvas och deklarativa metoder (SVG, UI-komponenter) är att Canvas inte lagrar scenen. Efter rendering fixeras pixlarna, och för att ändra bilden måste programmet radera och rita om det nödvändiga området. Detta ger maximal prestanda vid animation och minimal minnesförbrukning för att lagra scenen.

Canvas stöder två typer av kontext: 2D för platt grafik och WebGL / WebGL2 för tredimensionell rendering via GPU-hårdvaruacceleration. Enligt Statista (2025) används Canvas API i 89% av webbläsarspel och 67% av webbredigerare.

För mobilutveckling är Canvas anpassat på varje plattform: i Android via samnamnade klassen Canvas, i iOS via Core Graphics och Metal, i .NET MAUI via Microsoft.Maui.Graphics. Den enhetliga principen — ritkontext, koordinatsystem och transformationsstack — förblir oförändrad oavsett plattform.

Canvas-element

Duken representerar en bitmatris med fast storlek, angiven i pixlar. Varje pixel lagrar ett RGBA-värde — röda, gröna, blåa kanaler och alfa-genomskinlighet. Canvas koordinatsystem börjar i det övre vänstra hörnet, där X-axeln går åt höger och Y-axeln nedåt.

Dukens storlek bestäms av två parametrar: bredd och höjd i pixlar. Det är viktigt att skilja på dukens width- och height-attribut från CSS-storlekar — CSS kan skala det synliga området, men den interna upplösningen förblir som den är inställd av attributen. Om dessa parametrar inte matchar blir bilden suddig.

I Android sammanfaller Canvas storlek vanligtvis med storleken på View eller Bitmap som den är skapad på. Vid onDraw() skickas en Canvas som redan är konfigurerad till vyens storlek — utvecklaren behöver inte ställa in storleken manuellt.

Hur fungerar Canvas?

Canvas fungerar via en ritkontext — ett objekt som lagrar det aktuella tillståndet: fyllnadsfärg, linjetjocklek, transformationer och bana. Alla anrop till ritmetoder tillämpas på detta tillstånd och ändrar dukens bitmatris.

Renderingsprocessen följer en pipeline: rensning av område → inställning av tillstånd → byggande av bana → kontur eller fyllning. Vid animation upprepas denna cykel 60 gånger per sekund, vilket kräver optimering av varje steg för att bibehålla jämnhet.

Canvas använder immediate mode rendering — omedelbart läge, där varje ritkommando utförs direkt. Till skillnad från retained mode (SVG eller DOM) lagrar Canvas ingen lista över objekt. Detta minskar minnesförbrukningen men försvårar interaktivitet — utvecklaren implementerar själv hit-testning och omritning.

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

I exemplet ovan hämtar vi 2D-kontexten, ställer in fyllnadsfärgen, ritar en rektangel, ställer sedan in teckensnittet och visar text. Alla operationer utförs på duken med storleken som anges i elementets width och height-attribut.

Canvas tillståndsstack gör det möjligt att spara och återställa ritparametrar. Metoden save() placerar det aktuella tillståndet på stacken, restore() återställer det föregående. Detta är användbart vid kaskadtransformationer, när en förskjutning eller rotation behöver tillämpas på en grupp element utan att påverka de andra.

Huvudmetoder i Canvas API

Canvas API tillhandahåller cirka 40 metoder för rendering av primitiver, bilder, text och hantering av stilar. Grunduppsättningen innehåller metoder för att arbeta med rektanglar, banor, bågar och text. Låt oss titta på de viktigaste metodgrupperna.

Rita primitiver

Rektanglar — de snabbaste primitiverna i Canvas. Metoden fillRect(x, y, w, h) ritar en fylld rektangel, strokeRect() — endast kanten, clearRect() — rensar området. För komplexa polygoner används Path2D-objektet, som kan återanvändas mellan bildrutor.

Arbeta med bilder

drawImage() — huvudmetoden för att rendera rasterbilder på Canvas. Metoden accepterar tre uppsättningar parametrar: enkel kopiering, skalning och beskärning med skalning. Bilden kan laddas från HTMLImageElement, SVGImageElement eller en annan Canvas.

För mobilutveckling är det kritiskt att drawImage() fungerar med Bitmap i Android och UIImage i iOS. Plattformsimplementationer använder hårdvaruacceleration när bilden och Canvas finns i samma GPU-texturminne. Om bilden inte matchar färgprofilen är prestandaförlust på grund av konvertering möjlig.

Animation på Canvas

requestAnimationFrame() — standardmekanismen för Canvas-animation. Till skillnad från setInterval synkroniserar denna metod renderingen med skärmens uppdateringsfrekvens (vanligtvis 60 FPS). När fliken är i bakgrunden stoppar webbläsaren anropen och sparar batteri.

För optimering av Canvas-animation bör omritningsområdet minimeras: istället för att rensa hela duken, använd clearRect() endast på det ändrade området. Gruppering av element i ett lager och cachning av statiska delar i offscreen Canvas minskar belastningen på renderingspipelinen.

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

Animationscykeln rensar duken, uppdaterar objektets position och ritar om det. requestAnimationFrame garanterar jämnhet och automatisk paus när fliken är dold, vilket sparar enhetens resurser.

Canvas inom mobilutveckling

Canvas på mobilplattformar är implementerat olika, men bygger på den gemensamma idén om en programmatisk duk. I Android är Canvas-klassen en del av grafiksystemet och skickas till metoden onDraw(Canvas) för alla View. I iOS är motsvarigheten Core Graphics med CGContext.

Canvas i Android

Android Canvas fungerar tillsammans med Bitmap eller SurfaceView. När Canvas skapas via Bitmap sker rendering till minnet, och via SurfaceView — direkt till skärmen med hårdvaruacceleration. Från API 14+ använder Canvas HWUI — hårdvaruacceleratorn som översätter ritkommandon till OpenGL eller Vulkan.

Nyckelmetoder för Android Canvas inkluderar drawBitmap(), drawCircle(), drawLine() och drawPath(). Alla metoder accepterar Paint — ett objekt som hanterar stilen: färg, tjocklek, kantutjämningseffekter. Enligt Google I/O (2024) visar Canvas på HWUI en prestandaökning på upp till 40% jämfört med programvarurendering.

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

I Android använder Canvas som standard hårdvaruacceleration från API 14+. För komplex grafik rekommenderas SurfaceView eller TextureView, som allokerar ett separat lager för rendering i en bakgrundstråd. Detta förhindrar blockering av UI-tråden vid intensiv animation.

Canvas i iOS

Core Graphics — Apples ramverk för raster- och vektorgrafik, motsvarigheten till Canvas. CGContext tillhandahåller metoder för att rita linjer, kurvor, gradienter och skuggor. I SwiftUI är Canvas tillgängligt via strukturen Canvas, som lades till i iOS 15.

SwiftUI Canvas använder GraphicsContext — en typsäker omslag runt Core Graphics. Utvecklaren arbetar med GraphicsContext, som stöder transformationer, lager och symboler. Till skillnad från UIKit hanterar SwiftUI Canvas automatiskt Retina-skärmar och dynamiska typer.

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 utmärker sig genom deklarativ syntax och automatisk renderingsoptimering. Ramverket bestämmer självt vilka delar av duken som behöver ritas om vid tillståndsändring. GraphicsContext stöder lager via metoden drawLayer, vilket förenklar skapandet av flerskiktad grafik.

Canvas prestanda

Canvas prestanda beror på tre faktorer: omritningsområde, antal ritanrop och operationskomplexitet. Varje anrop till en ritmetod är ett kommando som passerar genom pipelinen: CPU formar kommandot, GPU utför rastrering.

Grundregeln för optimering — minimering av antalet anrop. Istället för att rita 1000 separata punkter, använd en bana med 1000 segment — ett stroke()-anrop istället för 1000. Den andra regeln — cachning av statik: flytta oföränderliga element till offscreen Canvas och kopiera via drawImage().

Profilverktyg: Chrome DevTools Performance för webben, GPU Inspector för Android och Instruments för iOS. Enligt Google Chrome Developers (2025) orsakas 70% av Canvas prestandaproblem av överdriven omritning och brist på lager-cachning.

För mobila enheter är batteribesparing kritisk. Överdriven rendering belastar GPU:n och minskar drifttiden. Använd metoden willBePresented() i Android och displayLink i iOS för synkronisering med skärmens uppdateringsfrekvens.

Avancerade möjligheter med Canvas

Modernt Canvas har gått bortom enkel 2D-rendering. WebGL baserat på CanvasContext möjliggör rendering av tredimensionell grafik med hårdvaruacceleration. OffscreenCanvas flyttar tung rendering till Web Workers utan att blockera UI-tråden.

WebGL via Canvas

WebGL är en Canvas-kontext som ger tillgång till OpenGL ES från webbläsaren. Istället för fillRect() skriver utvecklaren shaders i GLSL och laddar geometri i buffertar. Enligt Statista (2025) stöder 92% av mobila webbläsare WebGL 2.0, vilket gör Canvas till grunden för webbspel och 3D-visualiseringar.

Canvas som behållare för WebGL förenklar integrationen av 2D- och 3D-grafik i en applikation. Till exempel renderas 3D-scenen via WebGL och UI-överlägget via 2D-kontexten för samma duk. Blandad rendering kräver hantering av Z-ordning och synkronisering av bildrutefrekvens.

OffscreenCanvas

OffscreenCanvas — API för att flytta rendering till en bakgrundstråd. Till skillnad från vanlig Canvas är OffscreenCanvas inte bunden till DOM och kan användas i en Web Worker. Detta gör det möjligt att utföra komplexa grafiska beräkningar parallellt med huvudtråden utan FPS-fall.

Överföring av färdig bildruta från Worker till huvudtråden sker via transferControlToOffscreen() och commit(). Enligt Chrome Platform Status (2025) stöds OffscreenCanvas i 87% av webbläsarna och rekommenderas för applikationer med intensiv rendering — grafiska redigerare, diagram och animationer.