changing color

html에서 색깔들에게 class 네임으로 jsColor를 주고, 

 

 const colors = document.getElementsByClassName("jsColor");

코드를 작성한다. 

 

console.log(colors)를 하면 텍스트가 array가 아니라 HTMLcollection으로 나온다. 

 

우리는 이를 array로 묶기 위해서 

 

console.log(Array.from(colors));

array.from 메소드를 사용한다. 

이 메소드는 object로부터 array를 만든다.

 

 

위를 활용하여 아래와 같이 코드를 작성한다. 

 

Array.from(colors).forEach((color) => color.addEventListener("click"));

 

array에 있는 하나하나 배열에 이벤트리스너를 주는 것이다. 

 

그리고 여기에 우리는

handleColorClick라는 함수를 만들 것이다. 

 

 

function handleColorClick(event) {
  console.log(event.target.style);
}

 

위 코드를 이용해 target값을 확인해보자.

 

우리가 여기서 원하는 값은 backgroundcolor이다.

 

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

 

위와같이 작성하여 클릭한 컬러값으로 우리가 선을 그리는 색이 변할 수 있도록 한다. 

 

const canvas = document.getElementById("jsCanvas"),
  ctx = canvas.getContext("2d"),
  colors = document.getElementsByClassName("jsColor");

canvas.width = 700;
canvas.height = 700;

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

let painting = false;

function stopPainting(event) {
  painting = false;
}

function startPainting() {
  painting = true;
}

function noMouseMove(event) {
  const x = event.offsetX;
  const y = event.offsetY;

  if (!painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }
}

function onMouseDown(event) {
  painting = true;
}

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

if (canvas) {
  canvas.addEventListener("mousemove", noMouseMove);
  canvas.addEventListener("mousedown", startPainting);
  canvas.addEventListener("mouseup", stopPainting);
  canvas.addEventListener("mouseleave", stopPainting);
}

Array.from(colors).forEach((color) =>
  color.addEventListener("click", handleColorClick)
);