Τι είναι το στοιχείο canvas στο HTML5;

Το στοιχείο <canvas> στο HTML5 είναι ένας κοντέινερ για το σχέδιο γραφικών μέσω scripts (συνήθως JavaScript). Επιτρέπει τη δημιουργία δυναμικών οπτικοποιήσεων, παιχνιδιών και κινούμενων σχεδίων απευθείας στον browser χωρίς πρόσθετα.

Βασικά σημεία:

• Ζωγραφική με pixel: Λειτουργεί σε επίπεδο pixel, παρέχοντας πλήρη έλεγχο σε κάθε στοιχείο της εικόνας.
• Χρήση API: Η αλληλεπίδραση με το <canvas> γίνεται μέσω του API του context απόδοσης, το πιο συνηθισμένο είναι το 2d για δισδιάστατα γραφικά. Υπάρχει επίσης webgl για 3D.
• Άδειο καμβάς: Το στοιχείο <canvas> από μόνο του είναι απλώς ένας κοντέινερ. Όλη η ζωγραφική γίνεται προγραμματιστικά.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Λαμβάνουμε το στοιχείο canvas
const canvas = document.getElementById('myCanvas');

// Λαμβάνουμε το context 2D
const ctx = canvas.getContext('2d');

// Ζωγραφίζουμε ένα ορθογώνιο
ctx.fillStyle = "#FF0000"; // Χρώμα πλήρωσης
ctx.fillRect(0, 0, 150, 75); // x, y, πλάτος, ύψος

Οι δυνατότητες περιλαμβάνουν:

• Απλές μορφές (γραμμές, ορθογώνια, κύκλοι, τόξα)
• Κείμενο
• Εικόνες
• Διαβαθμίσεις και μοτίβα
• Διαδρομές (path) για πολύπλοκα σχήματα