[Vanilla-JS] 3. Canvas Events

canvas는 div라고 생각하자.

 

canvas가 없을수도 있으니까 canvas가 존재하는지 확인할거다.

(mousemove로 존재확인)

---

const canvas = document.getElementById("jsCanvas");

function onMouseMove(event) {
  console.log(event);
}

if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
}

offset은 캔버스 부분과 관련있는 값이다.

clientX, Y는 이 윈도우 전체의 범위 내에서 마우스 위치값을 나타내는건데,

우리는 캔버스내에서의 좌표만 있으면 된다. (캔버스를 screen 사이즈로 했으면 당연히 client와 값이 같을거다.)

우리는 캔버스 크기를 다르게 했으니 다른 X&Y 값을 가진다.

 

---

캔버스를 클릭하는 순간을 인지하게 하고, painting을 시작하게 만들어야된다.

그것도 event로 해야된다.

(클릭했을때 반응하는 이벤트를 mousedown이라고 한다.)

---

캔버스를 클릭했을때와 안했을때의 painting  상태를 설정해주고,

마우스가 캔버스 밖을 벗어났을 때의 painting 상태도 설정해준다. (mouseleave)

---

painting 을 중지할수있는 function도 만들어보자.

 mouseup도 mouseleave처럼 stopPainting을 하지 않는 이유는,

나중에 저기에는 line이 필요하다. (실제로 그리는)

---

 

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.