# Canvas API

Canvas API는 HTML5에서 제공하는 API로, 웹 페이지에 2차원 그래픽을 그릴 수 있도록 해주는 강력한 도구입니다.

## 주요 기능
* 2D 그래픽 그리기: 선, 도형, 이미지 등을 자유롭게 그릴 수 있습니다.
* 텍스트 렌더링: 다양한 글꼴과 스타일로 텍스트를 표현할 수 있습니다.
* 이미지 처리: 이미지를 로드하고 조작하여 새로운 이미지를 생성할 수 있습니다.
* 애니메이션: setInterval이나 requestAnimationFrame 함수와 함께 사용하여 부드러운 애니메이션을 구현할 수 있습니다.
* 상호 작용: 마우스, 터치 이벤트를 감지하여 사용자와 상호 작용하는 기능을 구현할 수 있습니다.

## 사용 방법
1. HTML에 캔버스 요소 추가
    ```html
    <canvas id="myCanvas" width="300" height="150"></canvas>
    ```
2. JavaScript에서 캔버스 요소 가져오기
    ```javascript
    const canvas = document.getElementById('myCanvas');
    ```
3. 2D 렌더링 컨텍스트 얻기
    ```javascript
    const ctx = canvas.getContext('2d');
    ```
    * getContext('2d') 메서드를 사용하여 2D 렌더링 컨텍스트를 얻습니다.
    * 이 컨텍스트를 통해 다양한 그리기 메서드를 호출하여 캔버스에 그림을 그릴 수 있습니다.
4. 그리기
    ```javascript
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 100, 50); // 파란색 사각형 그리기
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2); // 원 그리기
    ctx.stroke();
    ```

## 경로 관련
* beginPath(): 새로운 path를 시작합니다.
* moveTo(x, y): 펜의 위치를 이동시킵니다.
* lineTo(x, y): 현재 위치에서 지정된 좌표까지 선을 그립니다.
* closePath(): 현재 path를 닫습니다.
* arc(x, y, radius, startAngle, endAngle): 원을 그립니다.
* fill(): 현재 path를 채웁니다.
* stroke(): 현재 path의 테두리를 그립니다.

## 스타일
* fillStyle: 채우기 색상을 설정합니다.
* strokeStyle: 선 색상을 설정합니다.
* lineWidth: 선의 두께를 설정합니다.
* lineCap: 선의 끝 모양을 설정합니다 (butt, round, square).
* lineJoin: 선이 만나는 부분의 모양을 설정합니다 (miter, round, bevel).

## 텍스트
* fillText(text, x, y): 지정된 위치에 텍스트를 채워서 그립니다.
* strokeText(text, x, y): 지정된 위치에 텍스트의 윤곽선을 그립니다.
* font: 폰트 스타일을 설정합니다.

## 이미지
* drawImage(image, dx, dy): 이미지를 캔버스에 그립니다.
* createPattern(image, repetition): 이미지를 패턴으로 만들어 채우기나 선 그리기에 사용합니다.

## 변환
* translate(x, y): 캔버스 좌표계의 원점을 이동시킵니다.
* rotate(angle): 캔버스를 회전시킵니다.
* scale(x, y): 캔버스를 확대 또는 축소합니다.

## 그 외
* clearRect(x, y, width, height): 지정된 영역을 지웁니다.
* save(): 현재 캔버스 상태를 저장합니다.
* restore(): 저장된 상태로 복원합니다.