Darba sākšana ar canvas JavaScript

Canvas ir īpašs zīmēšanas lauks pārlūkprogrammā, izmantojot JavaScript. Šis lauks tiek izveidots ar <canvas> tagu, kuram jānorāda platums un augstums:

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

Lai strādātu ar šo lauku, izmantojot JavaScript, vispirms jāiegūsta atsauce uz šo tagu kādā mainīgajā:

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

Pēc tam šim mainīgajam jāpiemēro metode getContext:

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

Var vienkāršot:

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

Rezultātā mainīgajā ctx tiks ierakstīts objekts, kas satur sevī tā saukto izpildes kontekstu. Visa zīmēšana notiks, izmantojot šī objekta metodes. To izpēti mēs uzsāksim nākamajās nodarbībās.