JS) Canvas API

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

🔍 Canvas API

Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공한다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다.

먼저, HTML에서 아래의 <canvas> 태그가 들어가야 한다.

<canvas id="canvas"></canvas>

그리고 Javascript에서
<canvas> 태그를 불러온 뒤 getContext() 메서드를 통해 캔버스의 드로잉 컨텍스트를 반환하는 코드를 작성한다.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

일정 지점부터 원하는 지점까지 라인을 그리고자 한다면 아래의 코드를 사용하여 그려볼 수 있다.

moveTo(x, y)
lineTo(x, y)

moveTo와 lineTo를 사용하는 예시는 아래와 같다.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path