# mindrawingjs

> A very basic HTML 5 drawing library. Taking inspiration from p5.js but much lighter weight.

Latest version **1.2.3** (published 2021-04-15) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2021-04-15 |
| First published | 2020-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | natfaulk |
| Maintainers | natfaulk |
| Keywords | html, canvas, drawing, js, mindrawingjs |

## Links

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

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.2.3 (latest) — 2021-04-15
- 1.2.2 — 2021-04-15
- 1.2.1 — 2021-04-15
- 1.2.0 — 2021-04-14
- 1.1.0 — 2020-07-28
- 1.0.0 — 2020-07-02

## README

MinDrawingJS - Minimal Drawing JS
=================================

I find myself using [p5.js](https://p5js.org/) a lot. However often I don't want it as the focal point of the application. Therefore often I don't want the draw function constantly looping. I also find I only use a vary small portion of the library (the basic drawing functions). Therefore I have made a library that is effectively a thin wrapper over the underlying HTML canvas methods with a similar API to p5.js but without all the unnecessary stuff I don't want.


API Reference
-------------
Version: 1.1.0  

### HTML canvas
The library requires either a canvas object or an HTML canvas with a unique ID. eg:

`<canvas id="myCanvas"></canvas>`

### `Mindrawingjs.setup(canvas[, width, height])`

**canvas**: Either a canvas object or an HTML canvas tag id as a string  
**width**: HTML canvas width (optional)  
**height**: HTML canvas height (optional)  

If canvas width and height are not specified, the current canvas width will be used. This is useful if the width has been set using the HTML tag eg:  
`<canvas id="myCanvas" width="800" height="600"></canvas>`

### `Mindrawingjs.setCanvasSize(width, height)`
Changes the canvas size to the specified size in pixels

**width**: The new canvas width  
**height**: The new canvas height  

### `Mindrawingjs.background(colour)`
Fills the screen with the specified color. Can be used to erase the canvas.

**colour**: The colour to fill the screen with. CSS style color e.g. `#FF0000`

### `Mindrawingjs.stroke(colour)`
Sets line and shape outline colour.

**colour**: The colour to set the line or outline to. CSS style color e.g. `#FF0000`

### `Mindrawingjs.strokeWeight(weight)`
Sets line width in px

**weight**: Width of line in px

### `Mindrawingjs.fill(colour)`
Sets fill colour

**colour**: The colour to set the fill to. CSS style color e.g. `#FF0000`

### `Mindrawingjs.rect(x, y, width, height)`
Draws a rectangle

**x**: X-position of top left corner of the rectangle  
**y**: Y-position of top left corner of the rectangle  
**width**: Width of rectangle in px  
**height**: Height of rectangle in px  

### `Mindrawingjs.rotatedRect(x, y, width, height, angle[, originX, originY])`
Draws a rectangle

**x**: X-position of top left corner of the rectangle  
**y**: Y-position of top left corner of the rectangle  
**width**: Width of rectangle in px  
**height**: Height of rectangle in px  
**angle**: Angle of rotation in radians  
**originX**: X-position of origin point about which rotation occurs and shifts the local coordinate system of the rectangle's origin to here (optional, defaults to 0)  
**originY**: X-position of origin point about which rotation occurs and shifts the local coordinate system of the rectangle's origin to here (optional, defaults to 0)


### `Mindrawingjs.ellipse(x, y, w[, h])`
Draws an ellipse (or circle)

**x**: X-position of the centre of the ellipse  
**y**: Y-position of the centre of the ellipse  
**w**: Width of ellipse in px  
**h**: Height of ellipse in px (optional)  

If the final parameter is omitted, the ellipse will be a circle with diameter w.

### `Mindrawingjs.line(ax, ay, bx, by)`
Draw a line between two points

**ax**: X-position of point 1  
**ay**: Y-position of point 1  
**bx**: X-position of point 2  
**by**: Y-position of point 2  

### `Mindrawingjs.bezier(ax, ay, bx, by, h1x, h1y, h2x, h2y)`
Draw a bezier curve between two points

**ax**: X-position of start point  
**ay**: Y-position of start point  
**bx**: X-position of end point  
**by**: Y-position of end point  
**h1x**: X-position of handle 1 (start point handle)  
**h1y**: Y-position of handle 1 (start point handle)  
**h2x**: X-position of handle 2 (end point handle)  
**h2y**: Y-position of handle 2 (end point handle)  

### `Mindrawingjs.text(text, ax, ay)`
Draws specified text at specified position

**text**: Text to display  
**ax**: X-position of bottom-left corner  
**ay**: Y-position of bottom-left corner  

### `Mindrawingjs.textSize(size)`
Sets the text size

**size**: Height of the text in px

Example
-------

```
<!DOCTYPE HTML>
<html lang="en">
<head>
  <title>MinDrawingJS example</title>
  <script src="../build/mindrawing.min.js"></script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <canvas id="myCanvas2"></canvas>

  <script type="text/javascript">
    const RED = '#FF0000';
    const GREEN = '#00FF00';
    const BLUE = '#0000FF';
    const BLACK = '#000';
    const WHITE = '#FFF';

    d = new Mindrawingjs();

    d.setup('myCanvas', 800, 600);
    d.background(BLACK);
    d.stroke(GREEN);
    d.strokeWeight(5);
    d.line(0, 500, 800, 500);

    d.fill(RED);
    d.stroke(WHITE);
    d.strokeWeight(2);
    d.rect(300,350,200,100);

    d2 = new Mindrawingjs();
    d2.setup('myCanvas2');
    d2.background(BLUE);
    d2.line(0, 0, d2.width, d2.height);

    d2.textSize(40);
    d2.fill(RED);
    d2.text("Hello world!", 25, 25 + 40);

  </script>
</body>
</html>
```

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