> For the complete documentation index, see [llms.txt](https://ephf.gitbook.io/discord-short/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ephf.gitbook.io/discord-short/canvas.md).

# Canvas

with Discord.Short you can create an image like you would do using JavaScript with html:

```javascript
const canvas = new Discord.Canvas(200, 200); // width, height
const ctx = canvas.getContext('2d');
```

you can create simple shapes and text:

```javascript
ctx.rect(10, 10, 30, 30); // x, y, width, height
ctx.ellipse(30, 40, 20, 20); // x, y, width, height
ctx.text('hello world', 20, 100, 20, 'arial'); // text, x, y, size?, font?
```

you can add a background and change the color of these shapes like this:

```javascript
ctx.background('#121212'); // color (hex, rgb)
ctx.fill('rgb(255, 0, 130)'); // color (hex, rgb)
```

you can make masks...

```javascript
ctx.beginMask('example'); // mask id
ctx.rect(20, 20, 50, 50);
ctx.closeMask();
```

and add them to shapes:

```javascript
ctx.mask('example'); // mask id
ctx.fill('#4912fe');
ctx.rect(10, 10, 70, 70);
```

and if you want, you can use an `svg`:

```javascript
ctx.svg('path/to/file.svg'); // filepath
```