Canvas: ce este, metode de redare și cum funcționează

Ce este Canvas?

Canvas este o zonă dreptunghiulară pe ecran în care programul execută redarea pixel cu pixel folosind un context de desenare. Conceptul s-a născut în standardele web HTML5 ca parte a specificației WHATWG în 2004 și de atunci a devenit baza pentru grafică pe toate platformele.

Principala diferență dintre Canvas și abordările declarative (SVG, componente UI) este că Canvas nu stochează scena. După redare, pixelii sunt fixați, iar pentru a modifica imaginea, programul trebuie să șteargă și să redeseneze zona necesară. Acest lucru oferă performanță maximă la animație și un consum minim de memorie pentru stocarea scenei.

Canvas suportă două tipuri de context: 2D pentru grafică plată și WebGL / WebGL2 pentru redarea tridimensională prin accelerare hardware GPU. Conform Statista (2025), Canvas API este utilizat în 89% din jocurile browser și 67% din editoarele web.

Pentru dezvoltarea mobilă, Canvas este adaptat pe fiecare platformă: în Android prin clasa cu același nume Canvas, în iOS prin Core Graphics și Metal, în .NET MAUI prin Microsoft.Maui.Graphics. Principiul unic — context de desenare, sistem de coordonate și stivă de transformări — rămâne neschimbat indiferent de platformă.

Elementele Canvas

Pânza reprezintă o matrice de biți de dimensiune fixă, specificată în pixeli. Fiecare pixel stochează o valoare RGBA — canalele roșu, verde, albastru și transparența alfa. Sistemul de coordonate Canvas începe din colțul din stânga sus, unde axa X merge la dreapta, iar axa Y în jos.

Dimensiunea pânzei este determinată de doi parametri: lățime și înălțime în pixeli. Este important să se facă distincția între atributele width și height ale pânzei și dimensiunile CSS — CSS poate scala zona vizibilă, dar rezoluția internă rămâne cea stabilită prin atribute. Nepotrivirea acestor parametri duce la estomparea imaginii.

În Android, dimensiunea Canvas coincide de obicei cu dimensiunea View sau Bitmap pe care este creat. La onDraw() este transmis un Canvas deja configurat la dimensiunile view-ului — dezvoltatorul nu trebuie să seteze manual dimensiunile.

Cum funcționează Canvas?

Canvas funcționează printr-un context de desenare — un obiect care stochează starea curentă: culoarea de umplere, grosimea liniei, transformările și traseul. Toate apelurile metodelor de desenare se aplică acestei stări și modifică matricea de biți a pânzei.

Procesul de redare urmează un pipeline: curățarea zonei → configurarea stării → construirea traseului → contur sau umplere. La animație, acest ciclu se repetă de 60 de ori pe secundă, ceea ce necesită optimizarea fiecărui pas pentru menținerea fluidității.

Canvas folosește immediate mode rendering — modul imediat, în care fiecare comandă de desenare este executată imediat. Spre deosebire de retained mode (SVG sau DOM), Canvas nu stochează o listă de obiecte. Acest lucru reduce consumul de memorie, dar complică interactivitatea — dezvoltatorul implementează singur hit-testing și redesenharea.

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

În exemplul de mai sus, obținem contextul 2D, setăm culoarea de umplere, desenăm un dreptunghi, apoi setăm fontul și afișăm textul. Toate operațiile sunt executate pe pânza cu dimensiunea specificată în atributele width și height ale elementului.

Stiva de stări a Canvas permite salvarea și restaurarea parametrilor de desenare. Metoda save() plasează starea curentă în stivă, restore() o restaurează pe cea anterioară. Acest lucru este util la transformări în cascadă, când trebuie aplicată o deplasare sau rotație unui grup de elemente fără a afecta celelalte.

Metodele principale ale Canvas API

Canvas API oferă aproximativ 40 de metode pentru redarea primitivelor, imaginilor, textului și gestionarea stilurilor. Setul de bază include metode pentru lucrul cu dreptunghiuri, trasee, arcuri și text. Să analizăm grupurile cheie de metode.

Desenarea primitivelor

Dreptunghiurile — cele mai rapide primitive Canvas. Metoda fillRect(x, y, w, h) desenează un dreptunghi umplut, strokeRect() — doar marginea, clearRect() — curăță zona. Pentru poligoane complexe se folosește obiectul Path2D, care poate fi reutilizat între cadre.

Lucrul cu imagini

drawImage() — metoda principală pentru redarea imaginilor raster pe Canvas. Metoda acceptă trei seturi de parametri: copiere simplă, scalare și decupare cu scalare. Imaginea poate fi încărcată dintr-un HTMLImageElement, SVGImageElement sau un alt Canvas.

Pentru dezvoltarea mobilă este critic că drawImage() funcționează cu Bitmap în Android și UIImage în iOS. Implementările platformelor folosesc accelerarea hardware când imaginea și Canvas se află în aceeași memorie de texturi GPU. Dacă imaginea nu se potrivește din punct de vedere al profilului de culoare, este posibilă o pierdere de performanță din cauza conversiei.

Animația pe Canvas

requestAnimationFrame() — mecanismul standard pentru animația Canvas. Spre deosebire de setInterval, această metodă sincronizează redarea cu frecvența de reîmprospătare a ecranului (de obicei 60 FPS). Când fila este în fundal, browserul oprește apelurile, economisind bateria.

Pentru optimizarea animației Canvas, trebuie minimizată aria de redesenhare: în loc să curățați întregul canvas, folosiți clearRect() doar pe zona modificată. Gruparea elementelor într-un singur strat și cache-ul părților statice în offscreen Canvas reduc încărcarea pipeline-ului de randare.

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

Ciclul de animație curăță canvasul, actualizează poziția obiectului și îl redesenează. requestAnimationFrame garantează fluiditatea și pauza automată la ascunderea filei, economisind resursele dispozitivului.

Canvas în dezvoltarea mobilă

Canvas pe platformele mobile este implementat diferit, dar se bazează pe ideea comună a pânzei programatice. În Android, clasa Canvas face parte din sistemul grafic, fiind transmisă în metoda onDraw(Canvas) a oricărui View. În iOS, echivalentul este Core Graphics cu contextul CGContext.

Canvas în Android

Android Canvas funcționează împreună cu Bitmap sau SurfaceView. La crearea Canvas prin Bitmap, redarea se face în memorie, iar prin SurfaceView — direct pe ecran cu accelerare hardware. De la API 14+, Canvas folosește HWUI — acceleratorul hardware care traduce comenzile de desenare în OpenGL sau Vulkan.

Metodele cheie ale Android Canvas includ drawBitmap(), drawCircle(), drawLine() și drawPath(). Toate metodele acceptă Paint — un obiect care gestionează stilul: culoarea, grosimea, efectele de anti-aliasing. Conform Google I/O (2024), Canvas pe HWUI arată o creștere a performanței de până la 40% comparativ cu randarea 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)
    }
}

În Android, Canvas folosește implicit accelerarea hardware de la API 14+. Pentru grafica complexă, se recomandă SurfaceView sau TextureView, care alocă un strat separat pentru redarea într-un fir de execuție de fundal. Acest lucru previne blocarea firului UI la animația intensă.

Canvas în iOS

Core Graphics — framework-ul Apple pentru grafică raster și vectorială, echivalentul Canvas. Contextul CGContext oferă metode pentru desenarea liniilor, curbelor, gradientelor și umbrelor. În SwiftUI, Canvas este disponibil prin structura Canvas, adăugată în iOS 15.

SwiftUI Canvas folosește GraphicsContext — un wrapper type-safe peste Core Graphics. Dezvoltatorul lucrează cu GraphicsContext, care suportă transformări, straturi și simboluri. Spre deosebire de UIKit, SwiftUI Canvas gestionează automat ecranele Retina și tipurile dinamice.

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 remarcă prin sintaxa declarativă și optimizarea automată a redării. Framework-ul determină singur care părți ale pânzei trebuie redesenhate la modificarea stării. GraphicsContext suportă straturi prin metoda drawLayer, ceea ce simplifică crearea graficii multistrat.

Performanța Canvas

Performanța Canvas depinde de trei factori: aria de redesenhare, numărul de apeluri de desenare și complexitatea operațiilor. Fiecare apel al unei metode de desenare este o comandă care trece prin pipeline: CPU formează comanda, GPU execută rasterizarea.

Regula de bază a optimizării — minimizarea numărului de apeluri. În loc să desenați 1000 de puncte separate, folosiți un traseu cu 1000 de segmente — un singur apel stroke() în loc de 1000. A doua regulă — cache-ul staticii: mutați elementele neschimbătoare într-un offscreen Canvas și copiați-le prin drawImage().

Instrumente de profilare: Chrome DevTools Performance pentru web, GPU Inspector pentru Android și Instruments pentru iOS. Conform Google Chrome Developers (2025), 70% din problemele de performanță Canvas sunt cauzate de redesenharea excesivă și lipsa cache-ului straturilor.

Pentru dispozitivele mobile este critică economisirea bateriei. Redarea excesivă încarcă GPU-ul și reduce durata de funcționare. Folosiți metoda willBePresented() în Android și displayLink în iOS pentru sincronizarea cu frecvența de reîmprospătare a ecranului.

Capabilități avansate ale Canvas

Canvas modern a depășit limitele redării simple 2D. WebGL bazat pe CanvasContext permite randarea graficii tridimensionale cu accelerare hardware. OffscreenCanvas mută redarea grea în Web Workers, fără a bloca firul UI.

WebGL prin Canvas

WebGL este un context Canvas care oferă acces la OpenGL ES din browser. În loc de fillRect(), dezvoltatorul scrie shader-e în GLSL și încarcă geometria în buffere. Conform Statista (2025), 92% din browserele mobile suportă WebGL 2.0, ceea ce face Canvas baza pentru jocurile web și vizualizările 3D.

Canvas ca container pentru WebGL simplifică integrarea graficii 2D și 3D într-o singură aplicație. De exemplu, scena 3D este randată prin WebGL, iar suprapunerea UI — prin contextul 2D al aceleiași pânze. Redarea mixtă necesită gestionarea ordinii Z și sincronizarea ratei de cadre.

OffscreenCanvas

OffscreenCanvas — API pentru mutarea redării într-un fir de execuție de fundal. Spre deosebire de Canvas obișnuit, OffscreenCanvas nu este legat de DOM și poate fi folosit într-un Web Worker. Acest lucru permite executarea calculelor grafice complexe în paralel cu firul principal fără scăderea FPS.

Transferul cadrului gata din Worker în firul principal are loc prin transferControlToOffscreen() și commit(). Conform Chrome Platform Status (2025), OffscreenCanvas este suportat în 87% din browsere și este recomandat pentru aplicații cu randare intensivă — editoare grafice, diagrame și animații.