# Drawing

Screen 256x256 px, origin top-left. Coordinates are rounded to integers.

## Hero

```js
g.hero(x, y, {pose: 'walk', direction: 'down-right', time: world.time, flip: false})
```

- `pose`: `idle / walk / jump / happy / hurt`. Each loops 4 frames from `time` (`hero-<pose><1..4>`).
- `direction`: `down-left / down-right / up-left / up-right`. Down shows the face, up the back. In `side`, only left or right matters.
- Size 24x24, feet on the bottom row. Jump height and hitboxes are up to the game.

## Sprites

```js
g.sprite('star', 40, 64)
g.sprite('slime', 120, 64, {flip: true})
```

`x, y` is the top-left pixel. Names and sizes: [assets](/docs/assets.md).

## Shapes and colors

```js
g.clear('paper')
g.rect(8, 8, 64, 1, 'ink')
```

| Name | Color |
| --- | --- |
| `ink` | `#171717` |
| `paper` | `#ffffff` |
| `mist` | `#f2f2f2` |
| `stone` | `#d4d4d4` |
| `shade` | `#929292` |

Use `rect` for frames, bars and backgrounds. Draw characters and objects with assets.

## Text

```js
g.text('SCORE 100', 8, 8, 'ink')
const width = g.measureText('SCORE 100')
```

8x8 pixel font, 1px spacing. Latin and kana. Unsupported glyphs (e.g. kanji) render `?`.