rect 메서드

rect 메서드는 지정된 지점에 직사각형을 그립니다. 이 직사각형은 stroke 메서드나 fill 메서드를 적용해야만 보이게 됩니다. 첫 번째 경우에는 윤곽선이, 두 번째 경우에는 채워진 도형이 그려집니다.

구문

컨텍스트.rect(x, y, 너비, 높이)

rect를 사용하여 윤곽선을 그려봅시다:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

이번에는 채워진 도형을 그려봅시다:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();