# canvas

The markup of every demo on <https://kuiper.oeds.it/canvas/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## ratio

Varies: 11 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-1-1 background-white-dark"></div><p class="background-muted text-center">1-1</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-5-4 background-white-dark"></div><p class="background-muted text-center">5-4</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-4-3 background-white-dark"></div><p class="background-muted text-center">4-3</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-3-2 background-white-dark"></div><p class="background-muted text-center">3-2</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-8-5 background-white-dark"></div><p class="background-muted text-center">8-5</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-16-9 background-white-dark"></div><p class="background-muted text-center">16-9</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-2-1 background-white-dark"></div><p class="background-muted text-center">2-1</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-21-9 background-white-dark"></div><p class="background-muted text-center">21-9</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-3-1 background-white-dark"></div><p class="background-muted text-center">3-1</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-32-9 background-white-dark"></div><p class="background-muted text-center">32-9</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="canvas-4-1 background-white-dark"></div><p class="background-muted text-center">4-1</p></div></div>
</div>
```

## element

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><canvas class="canvas-16-9 background-white-dark" width="480" height="270"></canvas><p class="background-muted text-center">canvas</p></div></div>
</div>
```