# sketchlib

> Functions for working with HTML canvas in vanilla JS

Latest version **0.1.1** (published 2024-11-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install sketchlib
pnpm add sketchlib
yarn add sketchlib
bun add sketchlib
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2024-11-17 |
| First published | 2023-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Michael Hairston |
| Maintainers | michaius |

## Links

- npm: https://www.npmjs.com/package/sketchlib
- Repository: https://github.com/mhairston/sketchlib
- Homepage: https://github.com/mhairston/sketchlib#readme
- Issues: https://github.com/mhairston/sketchlib/issues
- npm.io page: https://npm.io/package/sketchlib

## Dependencies (3)

- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.6.0
- [best-random](https://npm.io/package/best-random.md) ^1.0.3
- [@sunify/lerp-color](https://npm.io/package/@sunify/lerp-color.md) ^2.0.0

## Recent versions

- 0.1.1 (latest) — 2024-11-17
- 0.1.0 — 2023-10-30
- 0.0.7 — 2023-10-02

## README

# sketchlib

_A small, opinionated, vanilla JS library for working with HTML canvas_

This is a very early version. Expect to see panels askew and wires coming out of the walls.

```javascript
import lib from 'path/to/sketchlib/main.js';

let sketch, ctx;

whenReady(() => {
  sketch = prepareSketch({
    title: 'My Sketch',
    canvasId: 'mycanvas',
    canvasWidth: 800,
    canvasHeight: 600,
    pal: [
      '#404',
      '#fc7',
      '#8ba',
      '#222'
    ]
  });
  ctx = sketch.ctx;
  drawSketch();
});

const { canvasWidth, canvasHeight, hw, hh, ctx, pal } = sketch;

function drawSketch() {
  lib.background(ctx, pal[0]);
  ctx.fillStyle = pal[1];
  ctx.beginPath();
  ctx.moveTo(hw, 0);
  ctx.lineTo(canvasWidth, hh);
  ctx.lineTo(hw, canvasHeight);
  ctx.lineTo(0, hh);
  ctx.closePath();
  ctx.fill();
}

```

## Contributing

`yarn install`

`yarn build`


## TODO

* Reduce the overall size of the library by including less dependency code.
* Add a demo sketch.
* Update the sample code above.
* Make createSketch private, move contents of initSketch into prepareSketch.
* Add keywords to package.json

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