changing color, brush size 등 + 지우개 적용

1. 컬러 선택시 원하는 컬러로 변경하기
   동일 클래스를 갖는 color들을 console.log()하면 htmlcollection이 표시된다.
   여기서 배열(Array.from())을 따온다.
   배열의 각 요소에 대하여(forEach 함수 적용) 클릭 이벤트 발생시 ctx.strokeStyle 가 클릭된 color로 변경된다.

2. range 이벤트는 input에 반응한다.
   ctx.lineWidth 를 size로 지정한다.

3. 캔버스 채우기
   fill 버튼 클릭 - 컬러 선택 - 캔버스 클릭 - 채우기 적용
   fill 버튼 클릭 시 paint 으로 변경되도록 설정(전환모드)

4. 지우개 적용
   추가적으로 지우개를 적용시켜 보았다.
   도형 합성 API인
   - ctx.globalCompositeOperation = "destination-out" 적용 시 마우스 드래그 할 경우 지우개처럼 지워진다.(원래 이미지가 새로운 이미지 위에 표시되고 겹치지 않는 원래 이미지만 표시됨)
   - eraser를 사용하고 난 후 다시 paint하고 싶을 때 컬러가 적용되도록
   ctx.globalCompositeOperation = "source-over" 를 적용한다. (새로운 이미지가 원래 이미지 위에 표시됨. 기본값)
   - eraser를 사용하고 난 후 fill을 사용할 때 캔버스 전체에 destination-out 이 적용되는 문제가 발생한다.
   그래서 filling 과 !erasing 이 둘 다 true 일때만 fill이 적용되도록 설정하였다.

let erasing = false;

function colorChanging(event) {
  const color = event.target.style.backgroundColor;
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
  erasing = false;
  ctx.globalCompositeOperation = "source-over";
}

function eraserClick() {             
  if (erasing === false) {
    erasing = true;
    ctx.globalCompositeOperation = "destination-out";
  }
}

function fillingCanvas() {
  if (filling & !erasing) {
    // erasing === false일 때 적용
    // 둘 다 true이므로 조건 실행
    ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
  }
}

개별적으로 원하는 것을 만들고자 구글링을 열심히 했지만 결코 쉽지만은 않았다.
그러나 이 사소한 것을 해냈을 때의 성취감 덕분에 코딩을 한다. 영어 & 구글링 달인이 되고 싶다.