# shape-builder

> A library to draw shapes and text in JavaScript.

Latest version **0.0.16** (published 2023-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install shape-builder
pnpm add shape-builder
yarn add shape-builder
bun add shape-builder
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.16 |
| Published | 2023-04-23 |
| First published | 2022-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 153.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vladimir Plakhotnik |
| Maintainers | vladimir-plakhotnik |
| Keywords | shapes, drawing |

## Links

- npm: https://www.npmjs.com/package/shape-builder
- Repository: https://github.com/vladimir-plakhotnik/shape-builder
- Issues: https://github.com/vladimir-plakhotnik/shape-builder/issues
- npm.io page: https://npm.io/package/shape-builder

## Recent versions

- 0.0.16 (latest) — 2023-04-23
- 0.0.15 — 2023-04-20
- 0.0.14 — 2023-04-20
- 0.0.13 — 2022-08-08
- 0.0.12 — 2022-08-08
- 0.0.11 — 2022-08-07
- 0.0.10 — 2022-06-17
- 0.0.9 — 2022-06-17
- 0.0.8 — 2022-06-17
- 0.0.7 — 2022-06-17
- 0.0.6 — 2022-06-17
- 0.0.5 — 2022-06-16
- 0.0.4 — 2022-06-16
- 0.0.3 — 2022-06-15
- 0.0.2 — 2022-06-15
- … 1 more at https://npm.io/package/shape-builder/versions

## README

# shape-builder.js

A library to draw shapes and text in JavaScript.

![Alt text](public/logo.png?raw=true "shape-builder.js")

## Install

```Bash
npm install shape-builder
# or
yarn add shape-builder
```

The `dist` folder of this package contains files:

- **shape-builder.min.js**. A minified JavaScript code for running in a browser.
- **shape-builder.node.js**. For running in Node.

## Usage

```JavaScript
import { Builder, shapes } from "shape-builder";

const { Point, Rectangle } = shapes;

// Get a context
const context = document.getElementById("canvas").getContext("2d");

// Create a shape builder
const builder = new Builder();

builder
    // Add the shapes
    .addShape(
        new Rectangle(new Point(0, 0), 300, 300, {
            fillColor: "lightskyblue",
        })
    )
    .addShape(
        new Rectangle(new Point(10, 10), 180, 180, {
            fillColor: "yellow",
            borderColor: "orange",
        })
    )

    // An alternative way to add the shapes
    // .addShapes(
    //     new Rectangle(new Point(0, 0), 300, 300, {
    //         fillColor: "lightskyblue",
    //     }),
    //     new Rectangle(new Point(10, 10), 180, 180, {
    //         fillColor: "yellow",
    //         borderColor: "orange",
    //     })
    // )

    // Remove last shape if needed
    // .removeShapes(1)
    // or remove all shapes
    // .removeShapes()

    // Draw the shapes in the image context
    .draw(context);

// or use svg
const playground = document.getElementById("playground");

playground.innerHTML = builder.draw(
    playground.getClientRects()[0].width, 
    playground.getClientRects()[0].height
);

```

You can draw a shape without creating the shape builder:

```JavaScript

new Rectangle(new Point(0, 0), 300, 300, {
    fillColor: "lightskyblue",
}).draw(context);

```

Another way to use the shape builder is to first create a shape array:

```JavaScript

// Add the shapes to a shape array
const shapeArray = [];

shapeArray.push(
    new Rectangle(new Point(0, 0), 300, 300, {
        fillColor: "lightskyblue",
    })
);

shapeArray.push(
    new Rectangle(new Point(10, 10), 180, 180, {
        fillColor: "yellow",
        borderColor: "orange",
    })
);

// Create a shape builder
const builder = new Builder(shapes);

// Draw the shapes
builder.draw(context);

```

The `Point` object is used to set a coordinate point. The image coordinates are counted from the top-left corner.

See more examples in [`logo.js`](public/logo.js) and [`sine.js`](public/sine.js). To view the page in a browser, please clone the repo and run a server:

```bash
npm start
```

## Running in Node.js

You need to install an additional package [`node-canvas`](https://github.com/Automattic/node-canvas) to run the `shape-builder` in Node.js.

```Bash
npm install canvas
```

The following code shows an example of usage the `node-canvas` and the `shape-builder` in Node.js.

```JavaScript
const { createCanvas } = require("canvas");
const { shapes, Builder } = require("shape-builder");

const { Point, Rectangle } = shapes;

const canvas = createCanvas(400, 400);
const context = canvas.getContext("2d");

// Create a shape builder
const builder = new Builder();

builder
    // Add the shapes
    .addShape(
        new Rectangle(new Point(0, 0), 300, 300, {
            fillColor: "lightskyblue",
        })
    )
    .addShape(
        new Rectangle(new Point(10, 10), 180, 180, {
            fillColor: "yellow",
            borderColor: "orange",
        })
    )
    // Draw the shapes in the image context
    .draw(context);

console.log('<img src="' + canvas.toDataURL() + '" />');

// or use svg
const svg = builder.draw(500, 500);

console.log(svg);

```

## Shapes

The current version includes the following shapes:

### Circle

```JavaScript
Circle (
    center: Point, 
    radius: number, 
    options?: {
        fillColor?: string,
        borderColor?: string,
        thickness?: number,
        dash?: number[]
    }
)
```

### Curve

```JavaScript
Curve(
    points: Point[], 
    options?: {
        fillColor?: string,
        borderColor?: string,
        thickness?: number,
        dash?: number[]
    }
)
```

### Line

```JavaScript
Line(
    start: Point, 
    end: Point, 
    options?: {
        color?: string,
        thickness?: number,
        dash?: number[]
    }
)
```

### Rectangle

```JavaScript
Rectangle(
    coordinates: Point, 
    width: number, 
    height: number, 
    options?: {
        fillColor?: string;
        borderColor?: string;
        thickness?: number;
        dash?: number[];
    }
)
```

### Text

```JavaScript
Text(
    coordinates: Point,
    text: string, 
    options?: {
        color?: string,
        font?: {
            family?: string,
            size?: string,
            weight?: string,
            style?: string,
            kerning?: CanvasFontKerning,
            stretch?: CanvasFontStretch,
            variant?: CanvasFontVariantCaps,
            lineHeight?: string
        },
        text?: {
            align: CanvasTextAlign,
            baseline: CanvasTextBaseline,
        },
        rotate?: number;
    }
)
```

To measure a text you can use the `measure` method. This static method returns the [`TextMetrics`](https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics) interface.

```JavaScript
Text.measure(
    context: CanvasRenderingContext2D,
    text: string,
    font?: {
        family?: string,
        size?: string,
        weight?: string,
        style?: string,
        kerning?: CanvasFontKerning,
        stretch?: CanvasFontStretch,
        variant?: CanvasFontVariantCaps,
        lineHeight?: string
    }
);
```

To fit a text into a box use the `fitIntoBox` method. This static method returns a font size in pixels to fill the text in the box.

```JavaScript
Text.fitIntoBox(
    context: CanvasRenderingContext2D,
    text: string,
    boxSize: { width: number, height: number },
    font?: {
        family?: string,
        size?: string, // in px
        weight?: string,
        style?: string,
        kerning?: CanvasFontKerning,
        stretch?: CanvasFontStretch,
        variant?: CanvasFontVariantCaps,
        lineHeight?: string
    }
)
```

## License (MIT)

See [License File](LICENSE).

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