getContext-metodi

Metodi getContext asettaa piirtokontekstin ennen työskentelyä canvas-elementin kanssa. Metodin ensimmäisessä parametrissa määritellään kontekstin tyyppi - '2d' tai '3d', ja toisessa - sen attribuutit.

Syntaksi

canvas.getContext(kontekstin tyyppi, attribuutit);

Esimerkki

Luodaan canvas-elementti getContext ja asetetaan sille läpinäkyvä tausta attribuutin alpha avulla, joka kertoo selaimelle alfakanavan olemassaolosta:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d', {alpha: true});

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'red';
ctx.fill();

Esimerkki

Ja nyt luodaan läpinäkymätön tausta:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d', {alpha: false});

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'red';
ctx.fill();