# 캔버스

```html
<!doctype html>
<html>
<head>
    <title>Test</title>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            const canvas = document.querySelector('canvas');
            const width = canvas.width = window.innerWidth;
            const height = canvas.height = window.innerHeight;

            const g = canvas.getContext("2d");
            g.fillStyle = 'rgb(0, 0, 0)';
            g.fillRect(10, 10, 100, 200);

            g.strokeStyle = 'red';
            g.lineWidth = 1;
            g.strokeRect(20, 20, 200, 200);
        });

    </script>
</head>

<body style="margin:0; overflow: hidden;">
    <canvas id="canvas" style="background-color: antiquewhite;">
    </canvas>
</body>

</html>
```

- fillStyle
- strokeStyle
- lineWidth
- lineCap
- lineJoin
- font
- textAlign
- textBaseline
- shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY

- fillRect(x, y, w, h)
- strokeRect(x, y, w, h)
- clearRect(x ,y, w, h)

## Path

- beginPath()
- moveTo(x, y)
- lineTo(x, y)
- arc(x, y, radius, startAngle, endAngle, anticlockwise)
- arcTo(x,y,x,y,radius)
- bezierCurveTo(x,y,x,y,x,y)
- quadraticCurveTo(x,y,x,y)
- fill()
- stroke()
- closePath()

## Text

- strokeText(str, x, y)
- fillText(str, x, y)
- measureText(str)

## Image

```javascript
let image = new Image();
image.src = 'myimage.png';
image.onload = function(){
    g.drawImage(image, 100, 100);
}
```

## 캔버스

- save()
- restore()
- rotate()
- scale()
- translate()
- transform()