canvas�� Javascript�� 텍��트�� 해��한��.
- ```
var canvas = document.getElementById(������������ ������ canvas��� id);
var context = canvax.getContext("2d");
```
- �� 텍��트�� 픽�� 한��.

2.1. ��형 �� ¶

�� 형�� .
�� 형�� .
��형�� .

2.2. �� ¶

img ��, video ��, canvas �� DOM �� .
- img �� DOM �� Image �� 하�� .
- video �� DOM �� 할 �� drawImage()�� 호��한 �� .
�� 크�� 할 �� .
�� 하�� 할 �� .
�� 할 �� .
(�� )

2.3. ��한 �� 형 �� ¶

패��
- �� API�� 하�� 합.
- �� 패��
  - 패�� 하�� 하��하�� .
  - (�� )
- �� 텍��트�� 하�� API�� 하�� , �� , ��호 �� 한 패�� .
패�� 픽�� 표��하��
1. beginPath()�� .
  - �� 패�� .
2. �� API�� 하�� 패�� .
  - �� 패�� 픽�� 표�� .
3. ��픽�� 화�� 표��.
  - stroke()
    - 패�� 표��한��.
    - �� strokeStyle �� 한��.
  - fill()
    - 패�� .
    - 호�� 패�� 히�� 힌 ��태�� .
    - �� fillStyle �� 한��.
  - clip()
    - 패�� 클��핑 �� 한��.
    - 클��핑 �� 태�� 픽�� 클��핑 �� 표��.
    - beginPath()�� 호��하�� 클��핑 �� 해��할 �� .
    - (�� )

2.4. �� ¶

strokeStyle
- stroke(), strokeRect() �� 하�� 한��.
fillStyle
- fill(), fillRect() �� 하�� 한��.
�� 할 ��
- CSS Color
  - CSS3�� 할 �� .
  - �� 하�� #000000(��)�� .
- CanvasGradient
  - ��형 ��, ��형 �� 할 �� .
- CanvasPattern
  - img �� video �� 하�� 패�� 할 �� .
globalAlpha
- globalAlpha �� 하�� 투�� 할 �� .
- �� 0.0(�� 투��)�� 1.0(��투��)�� 할 �� .

2.4.1. �� ¶

��
- ��
- ��
  - (�� )
- �� 했��
  - (�� )

2.5. �� 효�� ¶

�� 텍��트�� 하�� 형�� 하�� 효�� 할 �� .

2.6. �� ¶

globalCompositeOperation
- �� 형�� 행�� 하�� .
- �� source-over ��.
- (�� )

2.7. 텍��트 �� ¶

��, 크��, �� 향 �� , �� 향 �� 하�� 텍��트�� 할 �� .
(��크)

2.8. ��픽 ��형 ¶

�� 텍��트�� 하�� 표��
- 확��, ��
- 회��
- ��
  할 �� .
- ��표 ��환 ��트��

2.9. �� 텍��트 ��태 �� ¶

save()
- �� 텍��트�� 태�� 한��.
- �� 픽�� 패�� 하�� .
- ��하�� 태 ��
  - ��표 ��환 ��트��
  - 클��핑 ��
  - strokeStyle
  - fillStyle
  - globalAlpha
  - lineWidth
  - lineCap
  - lineJoin
  - miterLimit
  - shadowOffsetX
  - shadowOffsetY
  - shadowBlur
  - shadowColor
  - globalCompositeOperation
  - font
  - textAlign
  - textBaseline
- restore()
  - �� 텍��트�� 태�� 한��.
  - save()�� 한 ��태�� 택�� restore()�� 호��할�� 택�� 탑�� 태�� .

2.10. 픽�� ¶

ImageData형 �� 하�� 트�� 픽�� 할 �� .
ImageData��
- width
- height
- data
  - 픽�� (0~255)�� 1�� .
  - �� 4�� 한�� 1픽�� (R, G, B, Alpha)�� .

2.11. �� URL�� ¶

�� toDataURL()�� 호��하�� URL�� .
toDataURL(type)
- �� 텍��트�� .
- type
  - �� MIME �� 한��.
  - �� 'image/png'��.
  - 'image/jpeg'�� (0.0~1.0)�� 품�� 할 �� .

2.12. �� ¶

�� 할 �� .

3. �� ¶

4. �� ¶

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
https://developer.mozilla.org/en/Canvas_tutorial
canvas�� 판
- ��. ��. - ��
HTML5 canvas cheat sheet
canvas�� 한 �� 한 �� 해�� 해��
framerate ��

html5/canvas

Contents

1. ���������? ¶

2. ������ ������ ¶

2.1. ������형 ��������� ¶

2.2. ��������� ������ ¶

2.3. ������한 ��������� ���형 ��������� ¶

2.4. �������� ������ ¶

2.4.1. ��� �������� ������ ¶

2.5. ��������� 효��� ¶

2.6. ��������� ������ ������ ������ ¶

2.7. 텍���트 ������ ¶

2.8. ������픽 ���형 ¶

2.9. ��������� ���텍���트 ���태 ��������� ������ ¶

2.10. 픽������ ��������� ¶

2.11. ������������ URL��� ������ ¶

2.12. ��������������� ¶

3. ������ ¶

4. ������ ������ ¶

1. ��? ¶

2. �� ¶

2.1. ��형 �� ¶

2.2. �� ¶

2.3. ��한 �� 형 �� ¶

2.4. �� ¶

2.4.1. �� ¶

2.5. �� 효�� ¶

2.6. �� ¶

2.7. 텍��트 �� ¶

2.8. ��픽 ��형 ¶

2.9. �� 텍��트 ��태 �� ¶

2.10. 픽�� ¶

2.11. �� URL�� ¶

2.12. �� ¶

3. �� ¶

4. �� ¶