# flying-canvas

> flying-canvas

Latest version **1.2.2** (published 2020-06-15) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-06-15 |
| First published | 2019-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 769.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andres J. Soria R. |
| Maintainers | ajsoriar |
| Keywords | flying-canvas |

## Links

- npm: https://www.npmjs.com/package/flying-canvas
- Repository: https://github.com/ajsoriar/flying-canvas
- Homepage: https://github.com/ajsoriar/flying-canvas#readme
- Issues: https://github.com/ajsoriar/flying-canvas/issues
- npm.io page: https://npm.io/package/flying-canvas

## Dependencies (1)

- [grunt](https://npm.io/package/grunt.md) ^1.1.0

## 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.2.2 (latest) — 2020-06-15
- 1.2.1 — 2020-06-15
- 1.1.1 — 2019-12-14
- 1.1.0 — 2019-05-12
- 1.0.0 — 2019-04-22
- 0.1.0 — 2019-04-11
- 0.0.2 — 2019-04-05
- 0.0.1 — 2019-04-05

## README

# flying-canvas [![Build Status](https://travis-ci.org/ajsoriar/angular-avatar.svg?branch=master)](https://travis-ci.org/ajsoriar/angular-avatar)

[![yarn version](https://badge.fury.io/js/flying-canvas.svg)](https://badge.fury.io/js/flying-canvas)
[![NuGet version](https://badge.fury.io/nu/flying-canvas.svg)](https://badge.fury.io/nu/flying-canvas)

flying-canvas is awesome. LOL!

![flying-canvas demo image](./demo/flying-canvas.gif?raw=true "flying-canvas demo image")
Check out the live example: **<https://www.subidote.com/flying-canvas>**

## Use it this way

### 1 Download and Install flying-canvas

- NPM: **npm install flying-canvas**
- Yarn: **yarn add flying-canvas**
- github: **<https://github.com/ajsoriar/flying-canvas>**
<!--- - NuGet: **PM> Install-Package flying-canvas** -->

### 2 Include dependences

#### 2.1 Include flying-canvas.min.js by referencing the necessary files

You will find .js and .css files in `dist` folder.

```javascript
<script src="../dist/flying-canvas.min.js"></script>
<link rel="stylesheet" href="../dist/flying-canvas.min.css">
```

#### 2.2 Initialize the plugin

```javascript
<script>
    flyingCanvas.init({
        showWings: false,
        animation: false
    });
</script>
```

When the canvas pane bumps into the edges a function can be executed specifying `bumpIntoEdgeFn`

```javascript
<script>
    flyingCanvas.init({
        showWings: false,
        bumpIntoEdgeFn: function(){
            console.log("Choca 1!");
        },
        animation: false
    });
</script>
```

#### 2.3 Show a picture

Use `src: "./void.png"` to load a pinture in the canvas.

```javascript
<script>
    flyingCanvas.init({
        src: "./void.png"
    });
</script>
```

#### 2.3 Awesome

```javascript
<script>
    flyingCanvas.init({
        width: 200,
        height: 400,
        showWings: false,
        bumpIntoEdgeFn: function(){
            console.log("Choca 1!");
        },
        zIndex: 300,
        awesome: 2 // This will render the picture of the column
    });
</script>
```

### 3 Configuration options

| option               | default | description           |
| :------------------- | :----- | :--------------------- |
| `flyingCanvas.init()`         | -  | Initializes the component allowing several parameters in json format. |
| `width`        | 350 | Width of the canvas. |
| `height`        | 400 | Height of the canvas. |
| `pictureFrameWidth` | 75 | Working on this now! |
| `src`        | null | Route to an image. |
| `flyingCanvas.loadImage()`        | - | Loads new images this way: `flyingCanvas.loadImage("newImage.jpg")`. |
| `flyingCanvas.clearImage()`        | - | Removes the image |
| `animation`        | boolean | In the case of false the component will not have movement when created. |
| `hidden`        | boolean | In the case of false the component will be hidden by default. |
| `showWings`        | boolean | Show wings|
| `awesome`        | unknown | Awesome stuff will happen. |
| `flyingCanvas.start()`        | - | Starts the movement of the canvas. |
| `flyingCanvas.stop()`        | - | Stops the movement. |
| `flyingCanvas.hide()`        | - | Hides the component. Does not destroy. The component will continue running in the background. |
| `flyingCanvas.show()`        | - | Shows the component again. |

## Development

sudo npm install -g eslint

sudo npm install -g grunt-cli

grunt build

## License

flying-canvas is [MIT licensed](./LICENSE).

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