[JS] canvas 메서드 : moveTo(offsetX, offsetY) 와 lineTo(offsetX, offsetY)의 차이

HTML5의 태그 중 'canvas'라는 것이 있는데 크기를 지정하면 그 안에 있는 픽셀들을 제어할 수 있는 기능이다.

픽셀들을 제어할 수 있는 것 중 대표적으로 선을 그리는 것이 있다.

마우스 이벤트가 발생했을 때 마우스의 위치를 계속 받으며 선을 그려줘야 한다!

이때 캔버스 내 마우스 x, y의 위치를 알려주는 'event.offsetX' 와 'event.offsetY'를 이용하여 메서드에 인자로 전달해주면 된다.

사용할 메서드는 moveTo(event.offsetX, event.offsetY) 와 lineTo(offsetX, offsetY)가 있다.

이 둘의 차이는 moveTo의 경우 단순히 경로를 받아 전달하는 것이고 lineTo는 실제로 선을 그리는 것이다.

 

만약 마우스를 클릭하는 순간부터 선을 그린다고 설정했다면, 마우스 클릭 전에는 moveTo를 쓰고 마우스 클릭 후에는 lineTo를 쓰면 된다.

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

let painting = false;

function onMouseMove(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    if(!painting) { // 마우스 클릭 전
        ctx.beginPath();
        ctx.moveTo(x,y); // path만 전달
    } else { // 마우스 클릭 후
        ctx.lineTo(x,y); // 실제로 path를 따라 선을 그림
        ctx.stroke();
    }

이런 식으로 사용하면 된다.