Canvas 펜 굵기 조절하기 (input range 슬라이더 사용)

목표

크기 부분에 있는 슬라이더 객체를 이용해 선의 굵기를 조절한다.

 

요소 만들기

<div class="range">
    <span>크기</span>
    <input id="rangeInput" type="range">
</div>

원하는 부분에 <input type="range">를 만들어준다.

 

event 연결하기

const rangeInput = document.querySelector("#rangeInput");
 
// rangeInput
rangeInput.min = 1;
rangeInput.max = 20;
rangeInput.step = 1;
rangeInput.value = 5;
 
rangeInput.addEventListener("change", e => ctx.lineWidth = e.target.value);

rangeInput에 대한 기본적인 설정을 한다. 최소, 최대값과 step(값의 간격), value(초기값)를 설정해준다.

 

addEventListener를 통해 rangeInput에 변화가 있을 때마다 변한 값을 ctx.lineWidth에 입력한다.