[momentum app] 지우개 기능 추가

const eraser = document.getElementById("jsEraser");

let erasingStart = false;
let erasingStop = false;

function stopPainting() {
    if(erasingStop === true) {
        erasingStart = false;
        painting =false;
    } else {
        painting = false;
    }
}

function startPainting() {
    if(erasingStop === true) {
        erasingStart = true;
        painting =false;
    } else {
        painting = true;
    }
}

function onMouseMove(event) {
    const x = event.offsetX
    const y = event.offsetY
    if(!painting){
        ctx.beginPath();
        ctx.moveTo(x, y);
    } else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
    if(erasingStart === true){
        ctx.clearRect(x,y,20,20);
    }
}

function handleEraserClick() {
    if(erasingStop === true) {
        erasingStop = false;
        eraser.innerText = "eraser";
    } else {
        erasingStop = true;
        eraser.innerText = "erasing";
    }
}

if(eraser) {
    eraser.addEventListener("click", handleEraserClick);
}

기존 함수들에 코드를 추가함.  erasing에 start와 stop를 추가한 이유는 한 개의 변수만 생성 시 클릭 시 지우개가 작동되지 않고, 마우스 커서 방향대로 계속 지우기 때문에 두 개의 변수를 생성하여 클릭 시 erasing할 수 있게 만들었다.

지우개 작동 중

간단한 그림판 구현이기 때문에 지우개 크기 조절은 만들지 않았다.