자바스크립트 - 그림판

자바스크립트 그림판 만들기

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 800;
ctx.lineWidth = 2;

let paintMode = false;


  function onMouseMove(event) { <-- 7. paintMode가 참일 경우 실행 
 if (paintMode) {
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke();
return;
 }
 ctx.moveTo(event.offsetX, event.offsetY);
  }

  function startPainting () { < 5. 터치 된 상태면 painMode == true
    paintMode = true
  }

  function stopPainting () { 6. 터치 안된 상태면 false
    paintMode = false
  }


canvas.addEventListener("mousemove", onMouseMove); <-- 1. 마우스가 움직이면
canvas.addEventListener("mousedown", startPainting); <-- 2. 마우스가 터치 상태인지
canvas.addEventListener("mouseup",stopPainting); <-- 3. 마우스가 터치안된 상태인지
canvas.addEventListener("mouseleave",stopPainting); <4. 마우스가 그림판에서 나간 상태인지