Metoda getContext

Metoda getContext setează contextul pentru desenat înainte de a lucra cu canvas. În primul parametru al metodei specificăm tipul de context - '2d' sau '3d', iar în al doilea - atributele sale.

Sintaxă

canvas.getContext(tipul contextului, atribute);

Exemplu

Haideți să creem un canvas getContext și să-i setăm un fundal transparent prin atributul alpha, care indică browserului prezența unui canal 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();

Exemplu

Iar acum haideți să facem un fundal opac:

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