Canvas: ano ito, mga paraan ng pag-render at kung paano ito gumagana

Ano ang Canvas?

Canvas ay isang parihabang lugar sa screen kung saan ang programa ay nagsasagawa ng pag-render ng pixel-bawat-pixel gamit ang drawing context. Ang konsepto ay isinilang sa mga web standard ng HTML5 bilang bahagi ng WHATWG specification noong 2004 at mula noon ay naging batayan para sa graphics sa lahat ng platform.

Ang pangunahing pagkakaiba ng Canvas mula sa mga deklaratibong approach (SVG, UI components) ay hindi iniimbak ng Canvas ang scene. Pagkatapos ng rendering, ang mga pixel ay naaayos, at para baguhin ang larawan, dapat burahin at i-re-render muli ng programa ang kinakailangang lugar. Ito ay nagbibigay ng maximum na pagganap sa animation at minimal na konsumo ng memory para sa pag-imbak ng scene.

Sinusuportahan ng Canvas ang dalawang uri ng context: 2D para sa flat graphics at WebGL / WebGL2 para sa three-dimensional na rendering sa pamamagitan ng GPU hardware acceleration. Ayon sa Statista (2025), ang Canvas API ay ginagamit sa 89% ng mga browser games at 67% ng mga web editor.

Para sa mobile development, ang Canvas ay iniangkop sa bawat platform: sa Android sa pamamagitan ng magkapangalan na klase Canvas, sa iOS sa pamamagitan ng Core Graphics at Metal, sa .NET MAUI sa pamamagitan ng Microsoft.Maui.Graphics. Ang pare-parehong prinsipyo — drawing context, coordinate system, at transform stack — ay nananatiling hindi nagbabago anuman ang platform.

Mga elemento ng Canvas

Ang canvas ay kumakatawan sa isang bit matrix na may takdang sukat, na tinutukoy sa pixels. Ang bawat pixel ay nag-iimbak ng RGBA value — pula, berde, asul na mga channel at alpha transparency. Ang coordinate system ng Canvas ay nagsisimula sa kaliwang sulok sa itaas, kung saan ang X axis ay pakanan, at ang Y axis ay pababa.

Ang sukat ng canvas ay tinutukoy ng dalawang parameter: lapad at taas sa pixels. Mahalagang pag-ibahin ang width at height attributes ng canvas mula sa CSS sizes — maaaring i-scale ng CSS ang nakikitang lugar, ngunit ang internal na resolution ay nananatiling itinakda ng attributes. Ang hindi pagtutugma ng mga parameter na ito ay humahantong sa paglabo ng larawan.

Sa Android, ang sukat ng Canvas ay karaniwang tumutugma sa sukat ng View o Bitmap kung saan ito ginawa. Sa onDraw(), isang Canvas na naka-configure na sa laki ng view ang ipinapasa — hindi kailangang manu-manong itakda ng developer ang mga sukat.

Paano gumagana ang Canvas?

Canvas ay gumagana sa pamamagitan ng drawing context — isang bagay na nag-iimbak ng kasalukuyang estado: fill color, kapal ng linya, mga transpormasyon, at path. Lahat ng tawag sa mga pamamaraan ng pagguhit ay inilalapat sa estadong ito at binabago ang bit matrix ng canvas.

Ang proseso ng pag-render ay sumusunod sa pipeline: paglilinis ng lugar → pag-set up ng estado → pagbuo ng path → outline o fill. Sa animation, ang siklong ito ay umuulit ng 60 beses bawat segundo, na nangangailangan ng optimization ng bawat hakbang para mapanatili ang kinis.

Gumagamit ang Canvas ng immediate mode rendering — agarang mode, kung saan ang bawat command ng pagguhit ay naisasagawa kaagad. Hindi tulad ng retained mode (SVG o DOM), hindi nag-iimbak ang Canvas ng listahan ng mga bagay. Binabawasan nito ang konsumo ng memory, ngunit pinapahirapan ang interaktibidad — ang developer mismo ang nagpapatupad ng hit-testing at pag-re-render.

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

Sa halimbawa sa itaas, nakukuha natin ang 2D context, itinatakda ang fill color, gumuhit ng parihaba, pagkatapos ay itinatakda ang font at nagpapakita ng teksto. Lahat ng operasyon ay ginagawa sa canvas na may sukat na tinukoy sa width at height attributes ng elemento.

Ang Canvas state stack ay nagpapahintulot sa pag-save at pag-restore ng mga parameter ng pagguhit. Ang pamamaraang save() ay naglalagay ng kasalukuyang estado sa stack, restore() ay nagre-restore ng nauna. Ito ay maginhawa sa cascade transformations, kapag kailangan ilapat ang shift o rotation sa isang grupo ng mga elemento nang hindi naaapektuhan ang iba.

Mga pangunahing pamamaraan ng Canvas API

Canvas API ay nagbibigay ng humigit-kumulang 40 pamamaraan para sa pag-render ng primitives, larawan, teksto, at pamamahala ng mga estilo. Ang pangunahing set ay may kasamang mga pamamaraan para sa pagtatrabaho sa mga parihaba, path, arko, at teksto. Tingnan natin ang mga pangunahing grupo ng mga pamamaraan.

Pagguhit ng primitives

Mga parihaba — ang pinakamabilis na primitives ng Canvas. Ang pamamaraang fillRect(x, y, w, h) ay gumuhit ng punong parihaba, strokeRect() — gilid lamang, clearRect() — naglilinis ng lugar. Para sa kumplikadong polygons, ginagamit ang Path2D object, na maaaring magamit muli sa pagitan ng mga frame.

Pagtatrabaho sa mga larawan

drawImage() — ang pangunahing pamamaraan para sa pag-render ng raster images sa Canvas. Ang pamamaraan ay tumatanggap ng tatlong set ng parameters: simpleng pag-kopya, pag-scale, at pag-crop na may pag-scale. Ang larawan ay maaaring i-load mula sa HTMLImageElement, SVGImageElement, o ibang Canvas.

Para sa mobile development, kritikal na ang drawImage() ay gumagana sa Bitmap sa Android at UIImage sa iOS. Ginagamit ng mga platform implementation ang hardware acceleration kapag ang larawan at Canvas ay nasa parehong GPU texture memory. Kung hindi tugma ang larawan sa color profile, posible ang pagkawala ng pagganap dahil sa conversion.

Animation sa Canvas

requestAnimationFrame() — ang karaniwang mekanismo para sa Canvas animation. Hindi tulad ng setInterval, ang pamamaraang ito ay nag-sync ng rendering sa refresh rate ng screen (karaniwang 60 FPS). Kapag ang tab ay nasa background, hihinto ang browser sa mga tawag, nakakatipid ng baterya.

Para sa optimization ng Canvas animation, dapat mabawasan ang lugar ng pag-re-render: sa halip na linisin ang buong canvas, gamitin ang clearRect() lamang sa binagong lugar. Ang paggrupo ng mga elemento sa isang layer at pag-cache ng mga static na bahagi sa offscreen Canvas ay nagbabawas ng karga sa rendering pipeline.

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

Ang siklo ng animation ay naglilinis ng canvas, nag-a-update ng posisyon ng bagay, at nag-re-render muli nito. requestAnimationFrame ay ginagarantiyahan ang kinis at awtomatikong pag-pause kapag nakatago ang tab, na nakakatipid ng mga resources ng device.

Canvas sa mobile development

Canvas sa mga mobile platform ay ipinatupad nang iba-iba, ngunit batay sa karaniwang ideya ng programatikong canvas. Sa Android, ang Canvas class ay bahagi ng graphics system, na ipinapasa sa onDraw(Canvas) method ng anumang View. Sa iOS, ang katumbas ay Core Graphics na may CGContext.

Canvas sa Android

Android Canvas ay gumagana kasama ng Bitmap o SurfaceView. Kapag gumagawa ng Canvas sa pamamagitan ng Bitmap, ang rendering ay ginagawa sa memorya, at sa pamamagitan ng SurfaceView — direkta sa screen na may hardware acceleration. Mula API 14+, ang Canvas ay gumagamit ng HWUI — ang hardware accelerator na nagsasalin ng mga drawing command sa OpenGL o Vulkan.

Ang mga pangunahing pamamaraan ng Android Canvas ay kinabibilangan ng drawBitmap(), drawCircle(), drawLine() at drawPath(). Lahat ng pamamaraan ay tumatanggap ng Paint — isang bagay na namamahala ng estilo: kulay, kapal, anti-aliasing effects. Ayon sa Google I/O (2024), ang Canvas sa HWUI ay nagpapakita ng pagtaas ng pagganap hanggang 40% kumpara sa 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)
    }
}

Sa Android, ang Canvas ay gumagamit ng hardware acceleration bilang default mula API 14+. Para sa kumplikadong graphics, inirerekomenda ang SurfaceView o TextureView, na naglalaan ng hiwalay na layer para sa rendering sa background thread. Pinipigilan nito ang pag-block ng UI thread sa panahon ng intensive animation.

Canvas sa iOS

Core Graphics — framework ng Apple para sa raster at vector graphics, katumbas ng Canvas. Ang CGContext ay nagbibigay ng mga pamamaraan para sa pagguhit ng mga linya, kurba, gradient, at anino. Sa SwiftUI, ang Canvas ay available sa pamamagitan ng istruktura Canvas, na idinagdag sa iOS 15.

Ang SwiftUI Canvas ay gumagamit ng GraphicsContext — isang type-safe na wrapper sa ibabaw ng Core Graphics. Ang developer ay nagtatrabaho sa GraphicsContext, na sumusuporta sa mga transpormasyon, layer, at simbolo. Hindi tulad ng UIKit, ang SwiftUI Canvas ay awtomatikong humahawak ng Retina screens at dynamic na mga uri.

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

Ang SwiftUI Canvas ay nakikilala sa pamamagitan ng deklaratibong syntax at awtomatikong optimization ng rendering. Ang framework mismo ang tumutukoy kung aling mga bahagi ng canvas ang kailangang i-re-render muli kapag nagbago ang estado. GraphicsContext ay sumusuporta sa mga layer sa pamamagitan ng pamamaraang drawLayer, na nagpapadali sa paglikha ng multi-layered graphics.

Pagganap ng Canvas

Pagganap ng Canvas ay nakadepende sa tatlong factor: lugar ng pag-re-render, bilang ng mga tawag sa pagguhit, at pagiging kumplikado ng mga operasyon. Ang bawat tawag sa pamamaraan ng pagguhit ay isang command na dumadaan sa pipeline: CPU ay bumubuo ng command, GPU ay nagsasagawa ng rasterization.

Ang pangunahing patakaran ng optimization — pagbawas ng bilang ng mga tawag. Sa halip na gumuhit ng 1000 magkakahiwalay na puntos, gumamit ng path na may 1000 segment — isang tawag sa stroke() sa halip na 1000. Ang pangalawang patakaran — pag-cache ng static: ilipat ang mga hindi nagbabagong elemento sa offscreen Canvas at kopyahin sa pamamagitan ng drawImage().

Mga tool sa profiling: Chrome DevTools Performance para sa web, GPU Inspector para sa Android, at Instruments para sa iOS. Ayon sa Google Chrome Developers (2025), 70% ng mga problema sa pagganap ng Canvas ay sanhi ng labis na pag-re-render at kawalan ng pag-cache ng mga layer.

Para sa mga mobile device, kritikal ang pagtipid ng baterya. Ang labis na pag-render ay naglo-load sa GPU at nagbabawas ng oras ng paggamit. Gamitin ang pamamaraang willBePresented() sa Android at displayLink sa iOS para sa synchronize sa refresh rate ng screen.

Mga advanced na kakayahan ng Canvas

Modernong Canvas ay lumampas na sa simpleng 2D rendering. Ang WebGL na batay sa CanvasContext ay nagpapahintulot sa pag-render ng three-dimensional graphics na may hardware acceleration. Ang OffscreenCanvas ay naglilipat ng mabigat na rendering sa Web Workers nang hindi nagba-block ng UI thread.

WebGL sa pamamagitan ng Canvas

WebGL ay isang Canvas context na nagbibigay ng access sa OpenGL ES mula sa browser. Sa halip na fillRect(), ang developer ay nagsusulat ng shaders sa GLSL at naglo-load ng geometry sa buffers. Ayon sa Statista (2025), 92% ng mga mobile browser ay sumusuporta sa WebGL 2.0, na ginagawang batayan ang Canvas para sa web games at 3D visualizations.

Ang Canvas bilang container para sa WebGL ay nagpapadali sa integrasyon ng 2D at 3D graphics sa isang application. Halimbawa, ang 3D scene ay nire-render sa pamamagitan ng WebGL, at ang UI overlay — sa pamamagitan ng 2D context ng parehong canvas. Mixed rendering ay nangangailangan ng pamamahala ng Z-order at synchronize ng frame rate.

OffscreenCanvas

OffscreenCanvas — API para sa paglilipat ng rendering sa background thread. Hindi tulad ng regular na Canvas, ang OffscreenCanvas ay hindi nakatali sa DOM at maaaring gamitin sa Web Worker. Ito ay nagpapahintulot sa pagsasagawa ng kumplikadong graphics computations nang parallel sa main thread nang walang pagbaba ng FPS.

Ang paglipat ng handa na frame mula Worker papunta sa main thread ay nangyayari sa pamamagitan ng transferControlToOffscreen() at commit(). Ayon sa Chrome Platform Status (2025), ang OffscreenCanvas ay suportado sa 87% ng mga browser at inirerekomenda para sa mga application na may intensive rendering — graphics editors, charts, at animations.