Rozpoczynanie pracy z canvas w JavaScript

Canvas to specjalny obszar do rysowania w przeglądarce za pomocą JavaScript. Ten obszar tworzy się za pomocą znacznika <canvas>, któremu należy podać szerokość i wysokość:

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

Do pracy z tym obszarem w JavaScript na początek uzyskajmy referencję do tego znacznika do jakiejś zmiennej:

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

Następnie do tej zmiennej należy zastosować metodę getContext:

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

Można uprościć:

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

W wyniku do zmiennej ctx zapisze się obiekt zawierający w sobie tak zwany kontekst wykonania. Wszystkie rysowanie będzie odbywać się za pomocą metod tego obiektu. Ich poznawaniem zajmiemy się w kolejnych lekcjach.