Canvas - 패드에서 그림이 안그려지는 이슈 (feat. mouse event와 touch event)

그림판처럼 그림을 그리는 기능을 구현해두었는데, 패드에서 그림이 안그려진다는 이슈를 확인했다.

export default function Canvas({ ... }) {
	function startDrawing(e: ...) {
       /* 현재 선 정보 초기화 */
    }
    
    function draw(e: ...) {
    	/* 그려진 선을 state에 추가 */
        /* 캔버스에 선 그리기 */
    }
    
    function stopDrawing () {
    	/* 선 그리기 종료 */
    }

   return (
   	  <canvas 
         ref={canvasRef}
         onMouseDown={startDrawing}
         onMouseMove={draw}
         onMouseUp={stopDrawing}
      />
      ...
   )
}

패드에서도 그림 그리는 기능을 지원하기 위해서, onMouseDown 속성 외에 onTouchStart, onTouchMove, onTouchEnd 속성에도 기능을 설정해 주어야 한다.

export default function Canvas({ ... }) {
	function startDrawing(e: ...) { ... }
    
    function startDrawingTouch(e: ...) { ... }
    
    function draw(e: ...) { ... }
    
    function drawTouch(e: ...) { ... }
    
    function stopDrawing () { ... }
    
    function stopDrawingTouch() { ... }

   return (
   	  <canvas 
         ref={canvasRef}
         onMouseDown={startDrawing}
         onMouseMove={draw}
         onMouseUp={stopDrawing}
         onTouchStart={startDrawingTouch}
         onTouchMove={drawTouch}
         onTouchEnd={stopDrawingTouch}
      />
      ...
   )
}