canvas events

1. 캔버스에 마우스를 올리면 그것을 감지
   이벤트리스너 mousemove 적용
   윈도우 전체 범위 내 마우스 위치값 clientX, clientY 는 무시
   캔버스 내 마우스 위치 좌표값 offsetX, offsetY 필요

2. 캔버스를 클릭하는 순간을 인지하고, 페인팅을 시작하는 작업
   이벤트리스너 mousedown 적용(클릭 유지시) ; painting = true

3. 캔버스 클릭을 풀었을 때 페인팅 중지
   mouseup 적용(클릭 유지를 풀었을 때) ; painting = false

4. 마우스가 캔버스 벗어났을 때
   ; painting = false

https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events 참조

• context : canvas 요소 안에서 픽셀에 접근할 수 있는 방법
  https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

• canvas는 두개의 사이즈를 가진다 (css 사이즈, pixel 조작하는 사이즈)
  js가 html로부터 캔버스 크기를 가져오지 않기 때문에
  js에서 canvas.width, canvas.height로 크기를 명시해준다.