Canvas: τι είναι, μέθοδοι απόδοσης και πώς λειτουργεί

Τι είναι το Canvas;

Canvas είναι μια ορθογώνια περιοχή στην οθόνη όπου το πρόγραμμα εκτελεί απόδοση pixel προς pixel χρησιμοποιώντας ένα context σχεδίασης. Η ιδέα γεννήθηκε στα web πρότυπα HTML5 ως μέρος της προδιαγραφής WHATWG το 2004 και από τότε έγινε η βάση για γραφικά σε όλες τις πλατφόρμες.

Η κύρια διαφορά του Canvas από τις δηλωτικές προσεγγίσεις (SVG, UI components) είναι ότι το Canvas δεν αποθηκεύει τη σκηνή. Μετά την απόδοση, τα pixel σταθεροποιούνται και για να αλλάξει η εικόνα, το πρόγραμμα πρέπει να σβήσει και να επανασχεδιάσει την απαιτούμενη περιοχή. Αυτό παρέχει μέγιστη απόδοση στην κίνηση και ελάχιστη κατανάλωση μνήμης για αποθήκευση της σκηνής.

Το Canvas υποστηρίζει δύο τύπους context: 2D για επίπεδα γραφικά και WebGL / WebGL2 για τρισδιάστατη απόδοση μέσω επιτάχυνσης υλικού GPU. Σύμφωνα με τη Statista (2025), το Canvas API χρησιμοποιείται στο 89% των browser παιχνιδιών και στο 67% των web επεξεργαστών.

Για την ανάπτυξη κινητών, το Canvas είναι προσαρμοσμένο σε κάθε πλατφόρμα: στο Android μέσω της ομώνυμης κλάσης Canvas, στο iOS μέσω Core Graphics και Metal, στο .NET MAUI μέσω Microsoft.Maui.Graphics. Η ενιαία αρχή — context σχεδίασης, σύστημα συντεταγμένων και στοίβα μετασχηματισμών — παραμένει αμετάβλητη ανεξάρτητα από την πλατφόρμα.

Στοιχεία του Canvas

Ο καμβάς αντιπροσωπεύει ένα bit matrix σταθερού μεγέθους, ορισμένου σε pixel. Κάθε pixel αποθηκεύει μια τιμή RGBA — κόκκινο, πράσινο, μπλε κανάλια και διαφάνεια άλφα. Το σύστημα συντεταγμένων του Canvas ξεκινά από την επάνω αριστερή γωνία, όπου ο άξονας X πηγαίνει δεξιά και ο άξονας Y προς τα κάτω.

Το μέγεθος του καμβά καθορίζεται από δύο παραμέτρους: πλάτος και ύψος σε pixel. Είναι σημαντικό να διακρίνουμε τα χαρακτηριστικά width και height του καμβά από τα μεγέθη CSS — το CSS μπορεί να κλιμακώσει την ορατή περιοχή, αλλά η εσωτερική ανάλυση παραμένει αυτή που ορίζεται από τα χαρακτηριστικά. Η αναντιστοιχία αυτών των παραμέτρων οδηγεί σε θόλωση της εικόνας.

Στο Android, το μέγεθος του Canvas συνήθως συμπίπτει με το μέγεθος του View ή Bitmap πάνω στο οποίο δημιουργήθηκε. Κατά την onDraw(), μεταβιβάζεται ένα Canvas ήδη διαμορφωμένο στα μεγέθη του view — ο προγραμματιστής δεν χρειάζεται να ορίσει χειροκίνητα τα μεγέθη.

Πώς λειτουργεί το Canvas;

Canvas λειτουργεί μέσω ενός context σχεδίασης — ενός αντικειμένου που αποθηκεύει την τρέχουσα κατάσταση: χρώμα γεμίσματος, πάχος γραμμής, μετασχηματισμούς και διαδρομή. Όλες οι κλήσεις μεθόδων σχεδίασης εφαρμόζονται σε αυτήν την κατάσταση και τροποποιούν το bit matrix του καμβά.

Η διαδικασία απόδοσης ακολουθεί ένα pipeline: καθαρισμός περιοχής → ρύθμιση κατάστασης → κατασκευή διαδρομής → περίγραμμα ή γέμισμα. Στην κίνηση, αυτός ο κύκλος επαναλαμβάνεται 60 φορές το δευτερόλεπτο, που απαιτεί βελτιστοποίηση κάθε βήματος για διατήρηση της ομαλότητας.

Το Canvas χρησιμοποιεί immediate mode rendering — άμεση λειτουργία, όπου κάθε εντολή σχεδίασης εκτελείται αμέσως. Σε αντίθεση με το retained mode (SVG ή DOM), το Canvas δεν αποθηκεύει λίστα αντικειμένων. Αυτό μειώνει την κατανάλωση μνήμης, αλλά περιπλέκει τη διαδραστικότητα — ο προγραμματιστής υλοποιεί μόνος του το hit-testing και την επανασχεδίαση.

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

Στο παραπάνω παράδειγμα, λαμβάνουμε το context 2D, ορίζουμε το χρώμα γεμίσματος, σχεδιάζουμε ένα ορθογώνιο, στη συνέχεια ορίζουμε τη γραμματοσειρά και εμφανίζουμε κείμενο. Όλες οι λειτουργίες εκτελούνται στον καμβά με μέγεθος που καθορίζεται στα χαρακτηριστικά width και height του στοιχείου.

Η στοίβα καταστάσεων του Canvas επιτρέπει την αποθήκευση και επαναφορά των παραμέτρων σχεδίασης. Η μέθοδος save() τοποθετεί την τρέχουσα κατάσταση στη στοίβα, η restore() επαναφέρει την προηγούμενη. Αυτό είναι βολικό σε μετασχηματισμούς αλληλουχίας, όταν πρέπει να εφαρμοστεί μετατόπιση ή περιστροφή σε μια ομάδα στοιχείων χωρίς να επηρεαστούν τα υπόλοιπα.

Βασικές μέθοδοι του Canvas API

Canvas API παρέχει περίπου 40 μεθόδους για απόδοση πρωταρχικών στοιχείων, εικόνων, κειμένου και διαχείριση στυλ. Το βασικό σύνολο περιλαμβάνει μεθόδους για εργασία με ορθογώνια, διαδρομές, τόξα και κείμενο. Ας εξετάσουμε τις βασικές ομάδες μεθόδων.

Σχεδίαση πρωταρχικών στοιχείων

Ορθογώνια — τα ταχύτερα πρωταρχικά στοιχεία του Canvas. Η μέθοδος fillRect(x, y, w, h) σχεδιάζει γεμάτο ορθογώνιο, strokeRect() — μόνο περίγραμμα, clearRect() — καθαρίζει την περιοχή. Για σύνθετα πολύγωνα χρησιμοποιείται το αντικείμενο Path2D, το οποίο μπορεί να επαναχρησιμοποιηθεί μεταξύ καρέ.

Εργασία με εικόνες

drawImage() — η κύρια μέθοδος για απόδοση raster εικόνων στο Canvas. Η μέθοδος δέχεται τρία σύνολα παραμέτρων: απλή αντιγραφή, κλιμάκωση και περικοπή με κλιμάκωση. Η εικόνα μπορεί να φορτωθεί από HTMLImageElement, SVGImageElement ή άλλο Canvas.

Για την ανάπτυξη κινητών είναι κρίσιμο ότι η drawImage() λειτουργεί με Bitmap στο Android και UIImage στο iOS. Οι υλοποιήσεις πλατφόρμας χρησιμοποιούν επιτάχυνση υλικού όταν η εικόνα και το Canvas βρίσκονται στην ίδια μνήμη υφής GPU. Εάν η εικόνα δεν ταιριάζει ως προς το προφίλ χρώματος, είναι πιθανή απώλεια απόδοσης λόγω μετατροπής.

Κίνηση στο Canvas

requestAnimationFrame() — ο τυπικός μηχανισμός για κίνηση στο Canvas. Σε αντίθεση με το setInterval, αυτή η μέθοδος συγχρονίζει την απόδοση με τη συχνότητα ανανέωσης της οθόνης (συνήθως 60 FPS). Όταν η καρτέλα είναι στο παρασκήνιο, το πρόγραμμα περιήγησης σταματά τις κλήσεις, εξοικονομώντας μπαταρία.

Για βελτιστοποίηση της κίνησης στο Canvas, πρέπει να ελαχιστοποιηθεί η περιοχή επανασχεδίασης: αντί να καθαρίζετε ολόκληρο τον καμβά, χρησιμοποιήστε clearRect() μόνο στην τροποποιημένη περιοχή. Η ομαδοποίηση στοιχείων σε ένα επίπεδο και η προσωρινή αποθήκευση στατικών τμημάτων σε offscreen Canvas μειώνουν το φορτίο στο 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);
}

Ο κύκλος κίνησης καθαρίζει τον καμβά, ενημερώνει τη θέση του αντικειμένου και τον επανασχεδιάζει. Το requestAnimationFrame εγγυάται ομαλότητα και αυτόματη παύση όταν η καρτέλα είναι κρυμμένη, εξοικονομώντας πόρους της συσκευής.

Canvas στην ανάπτυξη κινητών

Canvas σε κινητές πλατφόρμες υλοποιείται διαφορετικά, αλλά βασίζεται στην κοινή ιδέα ενός προγραμματιστικού καμβά. Στο Android, η κλάση Canvas είναι μέρος του γραφικού συστήματος, που μεταβιβάζεται στη μέθοδο onDraw(Canvas) οποιουδήποτε View. Στο iOS, το αντίστοιχο είναι το Core Graphics με context CGContext.

Canvas στο Android

Android Canvas λειτουργεί σε συνδυασμό με Bitmap ή SurfaceView. Κατά τη δημιουργία Canvas μέσω Bitmap, η απόδοση γίνεται στη μνήμη, ενώ μέσω SurfaceView — απευθείας στην οθόνη με επιτάχυνση υλικού. Από API 14+, το Canvas χρησιμοποιεί HWUI — τον επιταχυντή υλικού που μεταφράζει εντολές σχεδίασης σε OpenGL ή Vulkan.

Οι βασικές μέθοδοι του Android Canvas περιλαμβάνουν drawBitmap(), drawCircle(), drawLine() και drawPath(). Όλες οι μέθοδοι δέχονται Paint — ένα αντικείμενο που διαχειρίζεται το στυλ: χρώμα, πάχος, εφέ εξομάλυνσης. Σύμφωνα με το Google I/O (2024), το Canvas σε HWUI δείχνει αύξηση απόδοσης έως 40% σε σύγκριση με την απόδοση λογισμικού.

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

Στο Android, το Canvas χρησιμοποιεί από προεπιλογή επιτάχυνση υλικού από API 14+. Για σύνθετα γραφικά, συνιστάται SurfaceView ή TextureView, τα οποία εκχωρούν ξεχωριστό επίπεδο για απόδοση σε νήμα παρασκηνίου. Αυτό αποτρέπει το μπλοκάρισμα του νήματος UI σε έντονη κίνηση.

Canvas στο iOS

Core Graphics — το πλαίσιο της Apple για raster και διανυσματικά γραφικά, αντίστοιχο του Canvas. Το context CGContext παρέχει μεθόδους για σχεδίαση γραμμών, καμπυλών, gradient και σκιών. Στο SwiftUI, το Canvas είναι διαθέσιμο μέσω της δομής Canvas, που προστέθηκε στο iOS 15.

Το SwiftUI Canvas χρησιμοποιεί GraphicsContext — ένα type-safe περιτύλιγμα πάνω από το Core Graphics. Ο προγραμματιστής εργάζεται με GraphicsContext, το οποίο υποστηρίζει μετασχηματισμούς, επίπεδα και σύμβολα. Σε αντίθεση με το UIKit, το SwiftUI Canvas χειρίζεται αυτόματα οθόνες Retina και δυναμικούς τύπους.

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 ξεχωρίζει για τη δηλωτική σύνταξη και την αυτόματη βελτιστοποίηση απόδοσης. Το πλαίσιο καθορίζει μόνο του ποια μέρη του καμβά πρέπει να επανασχεδιαστούν κατά την αλλαγή κατάστασης. Το GraphicsContext υποστηρίζει επίπεδα μέσω της μεθόδου drawLayer, που απλοποιεί τη δημιουργία πολυεπίπεδων γραφικών.

Απόδοση του Canvas

Απόδοση του Canvas εξαρτάται από τρεις παράγοντες: περιοχή επανασχεδίασης, αριθμός κλήσεων σχεδίασης και πολυπλοκότητα λειτουργιών. Κάθε κλήση μεθόδου σχεδίασης είναι μια εντολή που περνά μέσα από το pipeline: η CPU σχηματίζει την εντολή, η GPU εκτελεί τη rasterization.

Ο βασικός κανόνας βελτιστοποίησης — ελαχιστοποίηση του αριθμού κλήσεων. Αντί να σχεδιάζετε 1000 ξεχωριστά σημεία, χρησιμοποιήστε μια διαδρομή με 1000 τμήματα — μία κλήση stroke() αντί για 1000. Ο δεύτερος κανόνας — προσωρινή αποθήκευση στατικών: μετακινήστε τα αμετάβλητα στοιχεία σε offscreen Canvas και αντιγράψτε μέσω drawImage().

Εργαλεία προφίλ: Chrome DevTools Performance για web, GPU Inspector για Android και Instruments για iOS. Σύμφωνα με το Google Chrome Developers (2025), το 70% των προβλημάτων απόδοσης Canvas προκαλούνται από υπερβολική επανασχεδίαση και έλλειψη προσωρινής αποθήκευσης επιπέδων.

Για κινητές συσκευές, η εξοικονόμηση μπαταρίας είναι κρίσιμη. Η υπερβολική απόδοση φορτώνει την GPU και μειώνει τον χρόνο λειτουργίας. Χρησιμοποιήστε τη μέθοδο willBePresented() στο Android και displayLink στο iOS για συγχρονισμό με τη συχνότητα ανανέωσης της οθόνης.

Προηγμένες δυνατότητες του Canvas

Σύγχρονο Canvas έχει ξεπεράσει τα όρια της απλής 2D απόδοσης. Το WebGL βασισμένο στο CanvasContext επιτρέπει την απόδοση τρισδιάστατων γραφικών με επιτάχυνση υλικού. Το OffscreenCanvas μεταφέρει τη βαριά απόδοση σε Web Workers χωρίς να μπλοκάρει το νήμα UI.

WebGL μέσω Canvas

WebGL είναι ένα context Canvas που παρέχει πρόσβαση στο OpenGL ES από το πρόγραμμα περιήγησης. Αντί για fillRect(), ο προγραμματιστής γράφει shaders σε GLSL και φορτώνει γεωμετρία σε buffers. Σύμφωνα με τη Statista (2025), το 92% των κινητών browsers υποστηρίζουν WebGL 2.0, καθιστώντας το Canvas τη βάση για web παιχνίδια και 3D οπτικοποιήσεις.

Το Canvas ως δοχείο για WebGL απλοποιεί την ενσωμάτωση 2D και 3D γραφικών σε μία εφαρμογή. Για παράδειγμα, η 3D σκηνή αποδίδεται μέσω WebGL και η επικάλυψη UI — μέσω 2D context του ίδιου καμβά. Μικτή απόδοση απαιτεί διαχείριση σειράς Z και συγχρονισμό ρυθμού καρέ.

OffscreenCanvas

OffscreenCanvas — API για μεταφορά απόδοσης σε νήμα παρασκηνίου. Σε αντίθεση με το κανονικό Canvas, το OffscreenCanvas δεν είναι συνδεδεμένο με το DOM και μπορεί να χρησιμοποιηθεί σε Web Worker. Αυτό επιτρέπει την εκτέλεση σύνθετων γραφικών υπολογισμών παράλληλα με το κύριο νήμα χωρίς πτώση FPS.

Η μεταφορά έτοιμου καρέ από το Worker στο κύριο νήμα γίνεται μέσω transferControlToOffscreen() και commit(). Σύμφωνα με το Chrome Platform Status (2025), το OffscreenCanvas υποστηρίζεται στο 87% των browsers και συνιστάται για εφαρμογές με εντατική απόδοση — γραφικούς επεξεργαστές, διαγράμματα και κινήσεις.