filling mode

filling mode를 만들어보자. 

 

그 전에 canvas documentation을 살펴보자. 

 

https://developer.mozilla.org/ko/docs/Web/API/CanvasRenderingContext2D

CanvasRenderingContext2D

 

우리가 원하는 방법을, 

.fillRect()라고 하는 것을 알 수 있다. 

 

width와 height에 의해서 결정된 사이즈로 (x,y)위치에 색칠된 사각형을 그림.

 

ctx.fillRect(50, 20, 100, 40);
// (x, y, width, height)

위와 같이 코드를 작성해보았더니, 

 

바로 색칠된 사각형이 출력되었다. 이 사각형 안에서도 페인트를 할 수 있다. 

 

하지만 이게 strokeStyle의 값을 적용하지는 못하고 있다. 

그래서 색을 바꾸어도 계속 검정색 사각형만 나온다. 

 

그럼 이 사각형의 색상을 변경시키는 것은 무엇이 있는지 찾아보자.  (mdn 참조해서 찾기)

 

.fillStyle  이 친구가 있다. 

 

ctx.fillStyle = "green";
ctx.fillRect(50, 20, 100, 40);

 

이렇게 함께 작성해주었더니 사각형이 초록색으로 나타났다. 

 

자, 그럼 이제 이 친구들을 이용해서 filling mode를 만들어보자.

 

우리는 handleModeClick함수에 아래와 같이 수정하여서 fillStyle색상을 변경시켜도 되고, 

 

function handleModeClick(event) {
  if (filling === true) {
    filling = false;
    mode.innerText = "fill";
  } else {
    filling = true;
    mode.innerText = "paint";
    ctx.fillStyle = ctx.strokeStyle;
  }
}

 

아래와 같이 handleColorClick 함수를 수정해서 

색상을 선택할 때 strockStyle뿐 아니라 fillStyle도 함께 변경되도록 할 수 있다. 

개인적으로는 아래의 코드가 더 사용성이 좋은 것 같다. 

 

function handleColorClick(event) {
  const color = event.target.style.backgroundColor;
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
}

 

 

그리고 이제 fillstyle을 초기화하자. 

 

그냥 아래와 같이 나열할 수 있지만, 

ctx.strokeStyle = "#2c2c2c";
ctx.fillStyle ="#2c2c2c";
ctx.lineWidth = 2.5;

 

 

그냥 이렇게 색상코드를 반복해서 적을 수도 있지만, 

같은 값이 반복적으로 사용되고 있다면, 

 

아래와 같이 변수를 정의하여 사용해줄 수 있다. 

const INITIAL_COLOR = "#2c2c2c";

 

 

이제 우리는 addEventListener를 하나 더 만들어야 한다. 

 

filling 모드에서 canvas를 click할 때 일어나는 변화를 만들어보자. 

 

const CANVAS_SIZE = 700; // 캔버스 사이즈가 반복적으로 사용됨으로 변수를 정의함.

canvas.width = CANVAS_SIZE; //수정 (재사용성위해서)
canvas.height = CANVAS_SIZE; //수정 (재사용성위해서)

function handleCanvasClick() {
  ctx.fillRect(0, 0, canvas.width, canvas.height); //canvas.width가 아닌 CANVAS_SIZE라고 해도 됨.
}

if (canvas) {
  canvas.addEventListener("mousemove", noMouseMove);
  canvas.addEventListener("mousedown", startPainting);
  canvas.addEventListener("mouseup", stopPainting);
  canvas.addEventListener("mouseleave", stopPainting);
  canvas.addEventListener("click", handleCanvasClick); //추가한 코드
}

위와 같이 코드를 작성하면, 

우리가 원하던 filling 모드가 실행된다! 예! ❣💕

 

근데 문제는 여기 filling하고 나서 paint도 하고 싶다느 ㄴ것이다. 

 

그래서 아까 우리가 작성했던 filling 변수가 필요한 것이다. 

 

 

function handleCanvasClick() {
  if (filling) {
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
}

 

handleCanvasClick함수에 if문을 추가하는데, (filling)을 조건으로 작성한다. 

 

그럼 fill된 상태에서도 paint가 가능하다! 

왜냐면 우리가 채우는건 filling 에서만 하도록 조건문을 작성했기 때문이다! :) 

 

 

오예! 💖