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:

html<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é:

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

Poté je na tuto proměnnou nutné aplikovat metodu getContext:

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

Lze zjednodušit:

javascriptlet 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.