stroke 메서드

stroke 메서드는 lineTo를 사용한 선 그리기를 완료하거나, 예를 들어 rect 메서드를 통해 그려진 도형의 윤곽선을 그릴 때 호출됩니다.

구문

컨텍스트.stroke()

예제

선을 하나 그려 봅시다:

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

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

예제

사각형을 하나 그려 봅시다:

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

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();

함께 보기

도형을 채우는 fill 메서드
선 색상을 지정하는 strokeStyle 속성