JavaScript - Canvas 2 : moveTo, lineTo

const canvas = document.querySelector("canvas");

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

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

아까는 약간 도형처럼 메서드 자체가 사각형을 만들어주고 모양을 잡아줬다면,
지금 이 moveTo와 lineTo를 이용하면 완전 내 스스로 그림을 그릴 수 있게 돼.

ctx.moveTo()는 연필의 포인터의 위치를 움직이는 메서드라고 생각하면 돼.

지금 보면 캔버스의 모양이 width, height가 800px이고 정사각형 캔버스가 만들어졌어.
처음 포인터는 제일 왼쪽 상단에 위치에 있어.
그럼 이 포인터를 moveTo()를 이용해서 내가 원하는 위치에 가져와.
그리고 lineTo()를 해서 하나하나 선을 그려가며 내가 원하는 그림을 만들 수 있어.

근데 궁금한 건 아직 곡선을 배우지 못해서 곡선 그리는 법이랑,

지금은 stroke() 라서 저렇게 라인만 딴 거고, fill()를 하면 저 정사각형 안을 다 채울 수 있어.
어 그럼 만약에 라인을 하나 지워서 사각형을 다 안그리고 fill()을 하면 어떻게 될까?

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

ctx.fill();

이렇게 작성을 하면 한 쪽 선이 사라지는데 어떻게 안을 채울까? 궁금해서 해봤는데,

이렇게 나와.

아 세개 선이 있어도 저렇게 판단하고 채워지는구나.
그럼 두개 선이면 어떻게 될까?

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


ctx.fill();

오우, 선이 두개니까 끝나는 점을 이어서 속을 채우는 방식이구나를 이해했어.