Canvasiga töötamise alustamine JavaScriptis

Canvas on spetsiaalne joonistusväli brauseris JavaScripti abil. See väli tehakse kasutades silti <canvas>, millele tuleb määrata laius ja kõrgus:

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

Selle väljaga töötamiseks JavaScriptis tuleb kõigepealt hankida viide sellele sildile mõnda muutujasse:

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

Seejärel tuleb sellele muutujale rakendada meetodit getContext:

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

Võib lihtsustada:

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

Tulemusena kirjutatakse muutujasse ctx objekt, mis sisaldab endas nn täitmiskonteksti. Kogu joonistamine toimub selle objekti meetodite abil. Nende uurimisega me järgmistes õppetükkideski tegeleme.