js-painter

Painting Board made with VanillaJS

구현할 기능 목록

• 화면 하단에 있는 기본 색상과 색상 팔레트에서 색상을 선택할 수 있다.
• 브러쉬(canvas)
  • 색칠 모드(그리기, 채우기)를 설정할 수 있다.
  • 브러쉬의 굵기를 마우스 드래그로 굵기 바를 조정해 변경할 수 있다.
• 공유 및 저장
  • 저장 버튼을 누르면 현재 그림을 저장할 수 있다.
  • 공유 버튼을 누르면 해당 이미지를 소셜 미디어에 올릴 수 있다.
• 지우기
  • 지우개 기능
  • 전체 지우기 기능
  • 실행취소(복원, undo) 기능

고려 사항

• 기능의 수정, 추가가 용이하도록 설계하고 코드를 작성해야 한다.

새로 배운 것

• offset과 screen의 차이
  • offset은 이벤트 대상이 기준이 된다.
  • screen은 모니터 화면을 기준으로 좌표를 제공한다. 브라우저 화면이 아니라 사용자의 모니터 화면 전체를 기준으로 좌표를 측정한다.
  • page는 전체 문서를 기준으로 좌표를 반환한다. 스크롤 화면을 포함한다.
  • context.drawImage()가 동작하려면 img가 load되는 상황이어야 한다.