Método getContext

El método getContext establece el contexto para dibujar antes de trabajar con el canvas. En el primer parámetro del método indicamos el tipo de contexto - '2d' o '3d', y en el segundo - sus atributos.

Sintaxis

canvas.getContext(tipo de contexto, atributos);

Ejemplo

Vamos a crear un canvas getContext y establecerle un fondo transparente a través del atributo alpha, que indica al navegador la presencia de un 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();

Ejemplo

Y ahora vamos a crear un fondo opaco:

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