getContext method

The getContext method sets the context for drawing before working with the canvas. In the first parameter of the method, specify the context type - '2d' or '3d', and in the second - its attributes.

Syntax

canvas.getContext(context type, attributes);

Example

Let's make the getContext canvas and give it a transparent background via the alpha attribute to show the browser the presence of an alpha channel:

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

Example

Now let's make an opaque background:

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