[JavaScript] canvas API 이용한 브라우저 그림판 구현

먼저 html에 canvas 태그 작성해주고,

 <canvas id="jsCanvas" class="canvas"></canvas>

 

자바스크립트에서 getElementById로 canvas 태그 읽어준 뒤 canvas 변수에 getContext() 함수 사용하고, "2d" argument 주었다.

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

 

 

boolean 자료형의 painting 변수를 false값으로 선언해준 후, painting이 true가 되면 (onMouseDown함수 실행 === !painting ) canvas API에서 데려온 beginlPath()와 moveTo(x,y)를 실행한다. painting이 다시 false가 되면 (onMouseUp함수 실행) lineTo(x,y)와  stroke()함수를 실행한다. 

 

let painting = false;

function onMouseMove(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  if(!painting) {
    ctx.beginPath();
    ctx.moveTo(x,y);
  } else {
    console.log("creating line in",x,y);
    ctx.lineTo(x,y);
    ctx.stroke();
  }
  console.log(x,y);
}

function stopPainting() {
  painting = false;
}

function onMouseDown(event) {
  painting = true;
  console.log(event);
}

function onMouseUp(event) {
  stopPainting();
}

if(canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", onMouseDown);
  canvas.addEventListener("mouseup", stopPainting);
}

 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D