sukyoungshin / paint Goto Github PK

ISSUE

canvas 위에 element를 넣었더니, element의 height 만큼 캔버스가 그려지지 않습니다.

ISSUE

아래와 같은 과정을 예상하며 로직을 작업했으나
캔버스에서 마우스를 클릭하고 있을 때 stroke가 뚝뚝 끊기며 제대로 그려지지 않았습니다.

1. mousemove시, 마우스포인터 위치값을 받아와서 상태로 저장하고
2. 클릭을 하면, 마우스포인터 위치값을 토대로 시작점을 잡고
3. mousedown을 하면, 계속 그림을 그리다가
4. mouseup을 하면, 그림을 끝낸다!

관련커밋: 53b1701

최초 그림판앱에 마우스 클릭 시, 콘솔창에 다음과 같은 에러가 뜹니다.

Uncaught TypeError: Cannot read properties of undefined (reading 'beginPath')

원인: 최초 실행 시, getInitialPosition 함수 내부에서 context가 Undefined인 상태여서 타입에러가 발생합니다.
해결: context?.beginPath(); optional chaining 사용하여 해결