Metoda getContext

Metoda getContext vendos kontekstin për vizatim përpara punës me kanavacë. Në parametrin e parë të metodës specifikojmë llojin e kontekstit - '2d' ose '3d', ndërsa në të dytin - atributet e tij.

Sintaksa

canvas.getContext(lloji i kontekstit, atributet);

Shembull

Le të krijojmë një kanavacë getContext dhe t'i vendosim një sfond transparent përmes atributit alpha, që i tregon shfletuesit praninë e kanalit alfa:

<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();

Shembull

Tani le të krijojmë një sfond jo-transparent:

<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();