# miracle-canvas

> Enhance the functionality of the html canvas.You can add entity on canvas, you can move、resize、rotate and zoom the entity you add.

Latest version **1.0.9** (published 2021-05-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install miracle-canvas
pnpm add miracle-canvas
yarn add miracle-canvas
bun add miracle-canvas
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2021-05-18 |
| First published | 2021-04-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 228.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | pengfeixc |
| Keywords | canvas, zoom, scale, move |

## Links

- npm: https://www.npmjs.com/package/miracle-canvas
- npm.io page: https://npm.io/package/miracle-canvas

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2021-05-18
- 1.0.8 — 2021-05-11
- 1.0.7 — 2021-05-07
- 1.0.6 — 2021-04-24
- 1.0.5 — 2021-04-23
- 1.0.4 — 2021-04-23
- 1.0.3 — 2021-04-22
- 1.0.2 — 2021-04-18
- 1.0.1 — 2021-04-18
- 1.0.0 — 2021-04-17

## README

# miracle-canvas
You can add movable、resizable、zoomable、rotatable object(text、shape and image, etc) on html canvas with this library.

![](https://cdn.jsdelivr.net/gh/pengfeiw/personal-image-cdn@1.0.0/image/miracle-canvas.gif)

blog: [https://pengfeixc.com/blog/607c137a6d87a10eb2594fad](http://pengfeixc.com/blog/607c137a6d87a10eb2594fad)

github code: [https://github.com/pengfeiw/miracle-canvas](https://github.com/pengfeiw/miracle-canvas)

github demo: [https://github.com/pengfeiw/miracle-canvas-demo](https://github.com/pengfeiw/miracle-canvas-demo) 

### install
You can install the library with npm:
```bash
npm install miracle-canvas
```
with yarn:
```bash
yarn add mriacle-canvas
```
with cdn:
```js
// you can change the version number in src, below is version 1.0.6
<script src="https://cdn.jsdelivr.net/gh/pengfeiw/miracle-canvas@1.0.6/src/bundle.js"></script>
```

### how to use
1. First set canvas with miracle:

```javascript
import {Miracle} from "miracle-canvas";

const miracle = new Miracle(canvas);
```

2. Add some entity(shape、image etc):

```javascript
import {MiracleEntity, MiracleGraphic, MiracleControl} from "./miracle/index";

const {Circle, PolyShape, Image} = MiracleEntity;
const {ImageControl} = MiracleControl;
const {Point} = MiracleGraphic;

// create a rectangle
const rect = new PolyShape([
    new Point(150, 30),
    new Point(200, 30),
    new Point(200, 120),
    new Point(150, 120)
], false);
rect.filled = false;  // set filled false
rect.closed = true;

// create a circle
const circle = new Circle(new Point(400, 400), 50);
circle.strokeStyle = "green";

// create a triangle
const triangle = new PolyShape([
    new Point(100, 100),
    new Point(150, 150),
    new Point(100, 200)
]);
triangle.filled = true; // set filled true
triangle.closed = true;
triangle.fillStyle = "gray";

// create image with specific size
const img = new Image(new Point(200, 300), "/image.png", {
    height: 150,
    width: 180
});

// add the above entities
miracle.addEntity(circle, rect, triangle, img);
```

3. You can also set the visible of entity and the control point.

```javascript
// set the visible of entity
triangle.visible = false;

// set visible of operate control 
miracle.xLocked = false;
miracle.yLocked = false;
miracle.diagLocked = false;
miracle.rotateLocked = false;
```

4. Add custom control, only support `ImageControl` now.

```typescript
import {MiracleControl} from "./miracle/index";

const {ImageControl} = MiracleControl;

// create the button
const btn = new ImageControl("/clear.png", {width: 30, height: 30}, ControlBase.lt, -15, -30);
btn.mouseUpHandler = () => {
    window.alert("you click the button.");
};

// add the button to Entity
rect.addControl(btn);
```

5. if used with cdn. You access the class moudule under the `GlobalMiracle`:

```typescript
GlobalMiracle.Miracle;
GlobalMiracle.MiracleEntity;
GlobalMiracle.MiracleGraphic;
GlobalMiracle.MiracleControl;
```

### codepen

<iframe height="400" style="width: 100%;" scrolling="no" title="miracle-canvas" src="https://codepen.io/AhCola/embed/qBRgEQb?height=160&theme-id=light&default-tab=js" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
    See the Pen <a href='https://codepen.io/AhCola/pen/qBRgEQb'>miracle-canvas</a> by Pengfei Wang
    (<a href='https://codepen.io/AhCola'>@AhCola</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

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