@sambeevors/canvasplus v1.0.4

canvasplus

A JavaScript library for creating animations simply within HTML5 canvas.

Table of Contents

• Installation
• Usage
• Contributing
• License

Installation

Can be installed via npm or yarn

npm i @sambeevors/canvasplus

yarn add @sambeevors/canvasplus

Usage

To get started, you first need to import canvasplus and create a new canvas

import { CanvasPlus, Ease } from 'canvasplus'

CanvasPlus.addCanvas({
  el: '#canvas',
  size: [300, 150]
})

Add an animation

CanvasPlus.addAnimation({
  duration: 900,
  easing: Ease.outQuad,
  loop: true
})

Then simply add a shape

CanvasPlus.addShape({
  shape: 'rect',
  w: 100,
  h: 100,
  position: {
    start: [0, 0],
    end: [300, 150]
  }
})

You can also add images to the animation in a similar way

CanvasPlus.addImage({
  src: 'example.jpg',
  w: 50,
  h: 75,
  position: {
    start: [150, 150]
  }
})

Once you are ready you can start your animation

CanvasPlus.run()

Contributing

Contributions are welcome! There's so much I want to do with this project but struggle to find the time to do it. If there's any features you want me to add, open an issue or even have a go yourself! PRs are always welcome.

To get the project running locally, simply install dependencies with yarn.

License

This package is covered by the MIT License.