자바스크립트 - canvas(함수)

ctx.rect()

ctx.rect() 함수는 정사각형틀을 만들어줍니다. 만들어진 정사각형에 색을 넣어주려면 ctx.fill() 함수를 넣어야합니다.

ctx.fill()

ctx.fill()은 말그대로 만들어진 도형에 색깔을 넣어줍니다. 기본값은 검정색 입니다.

ctx.beginPath()

ctx.beginPath() 함수는 새로운 path를 생성하여 전에 생성했던 함수와 layer를 달리 합니다. 이 함수를 사용하면 그전에 만들었던 도형에 색깔이나 변형은 영향을 미치지 않습니다.

ctx.fillStyle = ""

ctx.fillStyle = ""; 은 만들어진 도형의 색깔을 바꿔줍니다. 이걸한후에 반드시 ctx.fill() 을 넣어줘야 합니다.

이렇게 하면 아래와 같이 4개의 검정 정사각형 후에 ctx.beginPath()를 하면 그전에 도형들은 색깔의 영향을 미치지 않습니다.