Nomad Coders : 바닐라JS로 그림판 만들기 수강

https://nomadcoders.co/javascript-for-beginners-2

바닐라 JS로 그림판 만들기 - 노마드 코더 Nomad Coders

 

  데이터 라벨링툴과 같이 그리기 입력이 동반되는 프로그램에서 캔버스가 쓰일 것 같아, 미리미리 가볍게 들었다. 내용이 깊지 않고 MDN문서를 참조하여 기능을 그대로 사용하는 수준이어서, 하루 2시간씩 이틀동안 모두 볼 수 있었다. Canvas API, 2D context에 대해 다루고, 그 외 내용은 일절 없어서 좋았다. 다른 지식을 더 찾아보기 위한 개념은 충분히 주입해준다.

 

내용 요약

• 재래식 HTML, CSS, JS를 이용한 레이아웃, 스크립트 구성
• reset CSS로 브라우저 기본 스타일 밀어버리고, 새로운 스타일 지정
• Canvas Path생성, Stroke/Fill style 지정
• [Paint/Fill] 토글 버튼으로 Stroke, Rect각각 그리기
• 더미 a 요소와 canvas.toDataURL을 이용한 이미지 다운로드