[바닐라js로 그림판 만들기] 2D Context

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를 조정할 수 있도..

2021.01.28