# @spacelys/drawkit

> Library for rendering 2d elements onto a canvas

Latest version **0.4.1** (published 2023-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @spacelys/drawkit
pnpm add @spacelys/drawkit
yarn add @spacelys/drawkit
bun add @spacelys/drawkit
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2023-04-02 |
| First published | 2020-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 66.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | alanf718 |

## Links

- npm: https://www.npmjs.com/package/@spacelys/drawkit
- Repository: https://github.com/Spacelys/Drawkit
- Homepage: https://github.com/Spacelys/Drawkit#readme
- Issues: https://github.com/Spacelys/Drawkit/issues
- npm.io page: https://npm.io/package/@spacelys/drawkit

## Recent versions

- 0.4.1 (latest) — 2023-04-02
- 0.4.0 — 2023-04-01
- 0.3.1 — 2023-01-07
- 0.2.1 — 2022-12-23
- 0.2.0 — 2022-08-01
- 0.1.2 — 2021-08-26
- 0.1.1 — 2021-08-22
- 0.1.0 — 2021-08-21
- 0.0.2 — 2020-12-25
- 0.0.1 — 2020-12-25

## README

# Drawkit
Library for rendering 2d elements onto an html canvas

## Usage and Instalation

`npm install @spacelys/drawkit --save`

If you are using typescript autocomplete will be your best friend when it comes to understanding what methods to use when drawing rects, circles, sprites, text, etc...

### Drawing a square

```typescript
import * as drawkit from '@spacelys/drawkit'

const ctx = drawkit.CanvasBuilder('#myCanvasId');
ctx.primitive().rect()
    .at(0, 0)
    .size(64, 64)
    .color('rgb(255, 0, 0)')
    .render();
```

---

### Drawing multiple squares

```typescript
const squareStamp = ctx.primitive().rect()
    .size(64, 64)
    .color('rgb(255, 0, 0)');
    
[0, 128, 256, 512].forEach(x => {
    squareStamp
        .at(x, 0)
        .render();
});
```

---

### Drawing sprite

```typescript
import * as drawkit from '@spacelys/drawkit'

const ctx = drawkit.CanvasBuilder('#myCanvasId');
const mySprite = await drawkit.loadImage('./url/to/mySprite.png');

ctx.draw(mySprite)
    .at(200, 200)
    .scaled(2, 2)
    .part(0, 0, 16, 16)
    .render();
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/@spacelys/drawkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._