@react-canvas-animation/core v0.1.5

React Canvas Animation

Package structure

• @react-canvas-animation/core
  • contains the Canvas component
• @react-canvas-animation/draw
  • contains helper functions to simplify creation of sketches
  • depends on @react-canvas-animation/core
• @react-canvas-animation/math
  • contains a bunch of math functions
  • totally independent of the other packages
• @react-canvas-animation/vector
  • implements vectors and vector related functions
  • totally independent of the other packages

Installation

// with npm
npm i --save @react-canvas-animation/core @react-canvas-animation/draw

// with yarn
yarn add @react-canvas-animation/core @react-canvas-animation/draw

Usage

Here is a quick example to get you started:

import Canvas from '@react-canvas-animation/core';;
import '@react-canvas-animation/draw';

const mySketch = ({width, height, fill, circle}) => {
  fill('red');
  circle(width / 2, height / 2, 50);
};

function App() {
  return <Canvas sketch={mySketch}/>;
}

Canvas component

Props

The sketch function

This function takes one argument which is a reference to the context of the corresponding Canvas component (not to be confused with the context of the canvas element). The context contains properties of the canvas such as its width and height as well as the drawing methods if @react-canvas-animation/draw was imported. Since the sketch function shares the same context with the Canvas component, all these methods and properties are also accessible via this.

Available canvas properties:

Responsiveness

If no width and height are given then the component handles window resizes on its own and updates the width and height. So if you want to create a responsive sketch don't provide the width and height prop and construct your sketch function in such a way that positions and sizes are not hardcoded but depend on the width and height properties of the Canvas component.