HTML 캔버스 stroke() 메서드 – 경로를 선으로 그리는 방법

HTML 캔버스 stroke() 메서드란?

HTML5 <canvas> 요소는 자바스크립트(JavaScript)를 이용해 웹 페이지 위에 그래픽을 자유롭게 그릴 수 있게 해주는 강력한 도구입니다. 그중 stroke() 메서드는 moveTo()와 lineTo() 등으로 미리 정의한 경로(path)를 실제 화면에 선으로 그려주는 역할을 합니다.

<canvas> 요소는 기본적으로 width와 height 속성을 통해 캔버스의 너비와 높이를 각각 지정할 수 있습니다. stroke() 메서드로 경로를 그리는 일반적인 작업 순서는 다음과 같습니다.

beginPath()로 새로운 경로를 시작합니다.
moveTo(x, y)로 시작 좌표를 지정합니다.
lineTo(x, y)로 경로를 연결합니다.
strokeStyle로 선 색상을 설정한 뒤 stroke()를 호출해 경로를 그립니다.

문법(Syntax)

ctx.stroke()

stroke() 메서드는 별도의 매개변수를 받지 않으며, 현재 정의된 경로를 설정된 선 스타일(색상, 두께 등)대로 화면에 렌더링합니다.

예제(Example)

다음은 stroke() 메서드를 활용해 서로 다른 색상의 두 개 선을 그리는 예제입니다.

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="450" height="350" style="border:2px solid red;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.moveTo(100, 200);
   ctx.lineTo(100, 100);
   ctx.strokeStyle = "blue";
   ctx.stroke();
   ctx.beginPath();
   ctx.moveTo(30, 30);
   ctx.lineTo(20, 100);
   ctx.lineTo(70, 100);
   ctx.strokeStyle = "orange";
   ctx.stroke();
</script>
</body>
</html>

실행 결과(Output)

HTML 캔버스 stroke() 메서드 – 경로를 선으로 그리는 방법

위 코드를 실행하면 캔버스 안에 파란색 세로 선 하나와 주황색 꺾인 선이 그려집니다. beginPath()를 호출할 때마다 새로운 경로가 시작되기 때문에, 각기 다른 색상의 선을 독립적으로 그릴 수 있다는 점이 핵심입니다.