그림판 웹사이트를 만들고나서 웹 뿐만 아니라 모바일 환경에서도 동작하는 것을 제작하고 싶었습니다. mouse 이벤트로는 canvas에서 동작하지 않았고, touch를 사용해야 했습니다.

1. event 등록하기

false로 하는 이유는 event가 상위 엘리먼트로 전달되지 않도록 하기 위함입니다.

canvas.addEventListener("touchstart", handleStart,false);
        canvas.addEventListener("touchmove", handleMove,false);
        canvas.addEventListener("touchend", handleEnd, false);

2. touchstart event

 function handleStart(evt) {
    console.log(evt);
    evt.preventDefault();
    if(drawMode === 'fill'){
        ctx.fillRect(0,0,500,500);
    }else {
        ctx.beginPath();
        paintingTrue();
       
  }
}

3. touchmove event

모바일 환경의 터치 상황을 console로 확인하기 위해서는 크롬의 개발자 도구에서 핸드폰을 선택하면 터치가 가능해집니다!

 function handleMove(evt) {
    evt.preventDefault();
    var touches = evt.changedTouches;
        ctx.lineTo(touches[0].screenX, touches[0].screenY);
        ctx.stroke();
  }

4. touchend event

  function handleEnd(evt) {
    evt.preventDefault();
    ctx.closePath();
    paintingFalse();
  }