WaiChungWong/jw-animate-canvas

A react component for canvas, integrated with animation feature.

jw-animate-canvas

A react component for canvas integrated with animation feature. It is a combination of canvas and animator.

Demo

Install

Props

Prop	Description
maintainPixelSize(optional)	whether the canvas should keep dimension from the moment it was created. Default: true
onResize(optional)	event handler when the canvas is being resized.
contextType(optional)	canvas context type. Default: "2d"
animator(optional)	the animator object for controlling the animation. If not provided, it will be created from within.
animate(optional)	animation method. Parameters: - context: canvas context - width: context width - height: context height - timeDiff: time difference between the last animate time (in seconds).

Usage

import React, { Component } from "react";
import ReactDOM from "react-dom";
import AnimateCanvas from "jw-animate-canvas";

class Example extends Component {
  constructor(props) {
    super(props);

    this.resizeHandler = this.resizeHandler.bind(this);
    this.animate = this.animate.bind(this);
  }

  componentDidMount() {
    const canvas = this.myCanvas;
    const { animator } = canvas;
    /** Start the animation. */
    animator.start();

    /** Pause the animation. */
    animator.pause();

    /** Resume the animation. */
    animator.resume();
  }

  resizeHandler(width, height) {
    /** ... **/
  }

  animate(context, width, height, timeDiff) {
    /** ... **/
  }

  render() {
    return (
      <AnimateCanvas
        ref={myCanvas => (this.myCanvas = myCanvas)}
        onResize={this.resizeHandler}
        animate={this.animate}
      />
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));