1. brush size const range = document.getElementById("jsRange"); 브러쉬 사이즈를 조정할 range를 자바스크립트에서 가져온다. if(range){ range.addEventListener("input", handleRangeChange) } 항상 이렇게 확인을 해주는 것이 좋다. (range가 존재할 때) Range에 이벤트를 추가해주는데, range는 input에 반응하기 때문에 저렇게 작성해준다.(onchange도 있긴 하던데) function handleRangeChange(event){ console.log(event); } 이렇게 해서 event를 확인해보면 event.target안에 value가 있는 것을 확인할 수 있다. function ha..

MDN을 통해서 canvas에 대해 배워본다. Canvas 태그는 context를 갖고 있는 HTML의 요소이다. context라는 것은 우리가 픽셀에 접근할 수 있는 방법이다. 굉장히 간단하게 이 context를 만들 수 있다. const ctx = canvas.getContext("2d"); 브러쉬역할을 하는 것을 getContext를 통해 가져온다. ctx.strokeStyle = "#616161"; //처음 사용하는 사람이 이 색상으로 사용하도록 한다. strokeStyle은 윤곽선 색을 설정하는 것이다. ctx.lineWidth = 2.5; lineWidth는 브러쉬의 굵기를 지정하는 것이다. 나중에는, 만들어 놓았던 input의 type=”range”를 통해 lineWidth를 조정할 수 있도..