자바스크립트 - 그림판 (LineWidth, Color)

input type에는 다양한 타입의 input 종류를 넣을수 있다. 그중에서 range를 이용해서 라인의 컬러를 변경할수 있다. max는 최대값 min은 최솟값 value는 html에서 보이는 input의 값을 말하는데 제일 중요하다.

  <input id="range" type="range" step="0.1" value="5" max="10" min="1">

color를 JS로 가져온뒤 이벤트리스너를 추가해준다. range는 change 이벤트리스너로 변경 함수를 만들수 있다.

color.addEventListener("change", onColorChange);

color input이 change 되면 변경되는 함수를 만들어준다. fillStyle과 strokeStyle에 input의 변경된 value를 넣어주기만 하면 된다.

function onColorChange (event) {
ctx.fillStyle = event.target.value;
ctx.strokeStyle = event.target.value;    
}