Today I Learned #25

paintJS fill function

paintJS의 기능 중 중요한 기능으로, canvas 전체를 원하는 색상으로 채워넣는 fill 기능을 추가하였다.

선언 및 정의

canvas의 공식문서를 통해 확인하면, CanvasRenderingContext2D부분의 fill and stroke styles 항목에서 fillStyle을 지정할 수 있다는 점을 확인할 수 있다. 따라서, strokeStyle과 같은 색상을 하도록 지정해주어야하고, fillRect() 함수를 통해서 canvas를 채울 것이기 때문에, 기본 strokeStyle값과 canvas.width,canvas.heigth의 값인 INITIAL_COLOR와 CANVAS_SIZE의 값을 각각 "#2c2c2c"와 500으로 선언해주었다. 또한 초기의 ctx.fillStyle = INITIAL_COLOR; 값으로 정의해주었다.

handleColorClick

기존의 handleColorClick함수는 사용자가 색상 div를 클릭하는 경우 ctx.strokeStyle을 해당 색상 값으로 통일시켜주는 내용의 함수였으나, fill 모드의 추가를 위해서 ctx.fillStyle의 값 또한 해당 색상 값으로 통일시켜주도록 하였다.

handleModeClick

기존의 handleModeClick은 filling의 값을 true 혹은 false로 바꾸어주고, 해당 button의 innerText를 변경해주는 것에 그쳤으나, filling이 true가 되는 경우, ctx.fillStyle의 값을 현재 ctx.strokeStyle의 값과 같게 하도록 하였다.

handleCanvasClick

canvas.addEventListener("click", handleCanvasClick);

를 통해 추가된 handleCanvasClick함수는 canvas에 "click" 이벤트가 발생한 경우 if(filling)을 통해 filling의 true여부를 확인하고 만약 true인 경우,

ctx.fillRect(0,0,CANVAS_SIZE,CANVAS_SIZE);

를 통해 canvas를 fillStyle의 색상으로 칠해주었다. 0,0은 해당 canvas에서의 위치를 의미하고, CANVAS_SIZE,CANVAS_SIZE는 색칠되는 Rect의 가로와 세로의 길이 (width & height) 를 의미한다. 따라서, 0,0에서의 CANVAS_SIZE만큼의 길이를 갖는 Rect는 전체 canvas를 의미하게 된다.

---

실행결과