Εκμάθηση του canvas σε JavaScript

Το canvas είναι ένα ειδικό πεδίο για σχεδίαση στον browser με JavaScript. Αυτό το πεδίο δημιουργείται με την χρήση της ετικέτας <canvas>, στην οποία πρέπει να ορίσουμε πλάτος και ύψος:

<canvas width="200" height="200"></canvas>

Για να δουλέψουμε με αυτό το πεδίο σε JavaScript, πρώτα πρέπει να πάρουμε μια αναφορά σε αυτή την ετικέτα σε μια μεταβλητή:

let canvas = document.querySelector('canvas');

Στη συνέχεια, σε αυτή τη μεταβλητή πρέπει να εφαρμόσουμε την μέθοδο getContext:

let canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

Μπορούμε να απλοποιήσουμε:

let ctx = document.querySelector('canvas').getContext('2d');

Ως αποτέλεσμα, στη μεταβλητή ctx θα καταγραφεί ένα αντικείμενο που περιέχει τον λεγόμενο context εκτέλεσης. Όλη η σχεδίαση θα πραγματοποιείται με τη βοήθεια μεθόδων αυτού του αντικειμένου. Η μελέτη τους είναι αυτό που θα ασχοληθούμε στα επόμενα μαθήματα.