JavaScript - Canvas 1 : fill(), rect()

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

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

ctx.rect(50, 50, 100, 100);
ctx.rect(200, 200, 100, 100);
ctx.fill();

ctx.beginPath();
ctx.rect(400, 400, 100, 100);
ctx.fillStyle = "red";
ctx.fill();

ctx.rect() 는 해당 위치에 선을 그려주는 메서드이다.
(그림을 시작할 포인터의 x위치, y위치, 그림의 x길이, y길이)

ctx.fill()은 말그대로 해당 rect들의 속을 색칠해주는 메서드이다.

그리고 중간에 ctx.beginPath()가 있는데, 경로를 다르게 해주는 메서드이다.
이 메서드를 넣지 않으면, rect의 경로가 전부 다 똑같은 경로에 만들어지기에 fillstyle = "red"를 해주면 모든 rect들에게 fillstyle이 적용되어 버린다.

그래서 내가 따로 이 친구만 색상이나 변경점을 주고 싶다면 저렇게 경로를 바꿔서 보여주면 된다.