react-pts-canvas

Pts Canvas React Component.

This is a React Component for canvas drawing using Pts. Pts is a javascript library for visualization and creative-coding.

Install

npm install --save react-pts-canvas

Examples

  • The example folder provides a quick example of using PtsCanvas in a React app
  • Take a look at more examples in pts-react-example repo.

Quick Start

import React, { Component } from 'react'
import PtsCanvas from 'react-pts-canvas'

// Add your own Pts drawing functions
class MyCanvas extends PtsCanvas {
  animate( time, ftime ) {
    // ...
  }
}

// Use the component
class Example extends React.Component {
  render () {
    return (
      <MyCanvas background="#abc" play={true} />
    )
  }
}

Usage

If you are getting started with Pts, take a look at the cool demos and read the guides.

PtsCanvas is a component that you may extend to implement your own drawings and animations on canvas using Pts. Like this:

class MyCanvas extends PtsCanvas {
  
  animate (time, ftime, space) { 
    // your code for drawing and animation 
  }

  start (bound, space) { 
    // Optional code for canvas init 
  }

  action: (type, x, y, event) { 
    // Optional code for interaction 
  }

  resize (size, event) { 
    // Optional code for resize 
  }
}

There are 4 functions in Pts that you can (optionally) overrides: animate, start, resize, and action. See this guide to learn more about how these functions work.

Once you have implemented your own canvas, you can use it as a component like this:

class Example extends React.Component {
  render () {
    return (
      <MyCanvas background="#abc" play={true} />
    )
  }
}

PtsCanvas component provides the following props:

  • background
    • background fill color of the canvas. Default value is "#9ab".
  • resize
    • A boolean value to indicate whether the canvas should auto resize. Default is true.
  • retina
    • A boolean value to indicate whether the canvas should support retina resolution. Default is true.
  • play
    • A boolean value to set whether the canvas should animate. Default is true.
  • touch
    • A boolean value to set whether the canvas should track mouse and touch events. Default is true.
  • name
    • The css class name of the container <div>. Default value is "pts-react". Use this class name to set custom styles in your .css file.
  • style
    • Optionally override css styles of the container <div>.
  • canvasStyle
    • Optionally override css styles of the <canvas> itself. Avoid using this except for special use cases.

GitHub