canvas는 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있다.

getContext(’2d’)로 불러온 context는 다양한 메소드를 지원한다.

사각형 그리기

• fillRect
  • 색칠된 직사각형을 그린다.
• strokeRect
  • 직사각형 윤곽선을 그린다.
• clearRect
  • 특정 부분을 지우는 직사각형이다.

경로 그리기

• beginPath()
  • 새로운 경로를 시작한다.
• closePath()
  • 현재 하위 경로의 시작 부분과 연결된 직선을 추가한다.
• stroke()
  • 윤곽선을 이용해 도형을 그린다.
• fill()
  • 경로의 내부를 이용해 내부가 채워진 도형을 그린다.
• moveTo(x, y)
  • 펜을 x와 y로 지정된 좌표로 옮긴다.
• lineTo(x, y)
  • 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그린다.