canvas context 학습내용1

mouseenter, mousedown 이벤트

 

    if(!isDrawing) { // mousedown일 때만 실제로 그려짐
        ctx.beginPath(); // 새로운 path 시작
        ctx.moveTo(drawX, drawY); // 실시간 offset 감지, 안할시 마지막 path에서 이어짐
    } else {
        ctx.lineTo(drawX, drawY);
        ctx.stroke(); // path에 stroke주기
    }

 

 

clearRect (x좌표, y좌표, 너비, 높이)

 

function reset() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

 

 

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

CanvasRenderingContext2D

 

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

CanvasRenderingContext2D.clearRect()