바닐라 JS로 그림 앱 만들기 #2.2 Line Width

<input id="line-width" type="range" min="1" max="10" 
    value="5" step="0.5"/>

 

html 에 위와 같은 코드를 추가한다.

"range는 1~10, 기본값 5, 0.5단위로"

 

function cancelPainting(){
    isPainting = false;
    ctx.beginPath(); //모든 line들은 같은 path로 그려지는 것 기억
}


lineWidth.addEventListener("change", onLineWidthChange);

 

뭐 사실 바뀌는건 이정도이다.

유의할 건 path설정을 다시 안 해주면 굵기를 바꿨을 때 그어져있던 모든 선들의 굵기가 동일해진 다는 점!

사용자가 페인팅을 마치면(isPainting == false) 새로운 path를 만들도록 하는 것 중요중요 ~