Začíname s canvas v JavaScripte

Canvas je špeciálne kresliace plátno v prehliadači v JavaScripte. Toto plátno sa vytvára pomocou tagu <canvas>, ktorému treba uviesť šírku a výšku:

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

Pre prácu s týmto plátnom v JavaScript je potrebné najprv získať odkaz na tento tag do nejakej premennej:

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

Potom je potrebné na túto premennú aplikovať metódu getContext:

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

Môžeme zjednodušiť:

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

Výsledkom je, že do premennej ctx sa zapíše objekt, ktorý obsahuje takzvaný kontext vykonávania. Všetko kreslenie prebieha pomocou metód tohto objektu. Ich štúdiom sa budeme zaoberať v nasledujúcich lekciách.