getContext 메서드

getContext 메서드는 캔버스 작업 전에 그리기 컨텍스트를 설정합니다. 메서드의 첫 번째 매개변수에는 컨텍스트 유형('2d' 또는 '3d')을 지정하고, 두 번째 매개변수에는 그 속성을 지정합니다.

구문

canvas.getContext(컨텍스트 유형, 속성);

예제

getContext를 사용하여 캔버스를 만들고 alpha 속성을 통해 브라우저에 알파 채널의 존재를 알리는 투명 배경을 설정해 봅시다:

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

예제

이번에는 불투명 배경을 만들어 봅시다:

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