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