Begin om met canvas in JavaScript te werk

Canvas is 'n spesiale tekenveld in die blaaier op JavaScript. Hierdie veld word gemaak met behulp van die etiket <canvas>, waaraan die breedte en hoogte aangedui moet word:

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

Om met hierdie veld op JavaScript te werk, moet ons eers 'n verwysing na hierdie etiket in 'n veranderlike kry:

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

Daarna moet die metode getContext op hierdie veranderlike toegepas word:

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

Dit kan vereenvoudig word:

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

As gevolg sal die voorwerp wat die sogenaamde uitvoeringskonteks bevat, in die veranderlike ctx weergegee word. Alle tekenwerk sal met behulp van die metodes van hierdie voorwerp plaasvind. Ons sal die studie hiervan in die volgende lesse aanpak.