Začínáme s canvas v JavaScriptu
Canvas je speciální kreslicí plocha
v prohlížeči v JavaScriptu. Tato plocha se vytváří
pomocí tagu <canvas>, kterému
je třeba nastavit šířku a výšku:
<canvas width="200" height="200"></canvas>
Pro práci s touto plochou v JavaScriptu je nejprve potřeba získat odkaz na tento tag do nějaké proměnné:
let canvas = document.querySelector('canvas');
Poté je na tuto proměnnou nutné aplikovat
metodu getContext:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
Lze zjednodušit:
let ctx = document.querySelector('canvas').getContext('2d');
Výsledkem je, že se do proměnné ctx zapíše
objekt obsahující takzvaný
kontext vykreslování. Veškeré kreslení
bude probíhat pomocí metod tohoto
objektu. Jejich studiem se budeme zabývat v následujících
lekcích.