jw-canvas

jw-canvas

A react component for canvas. Mainly for handling resize events to allow auto-maintaince on pixel size and ratio to prevent stretching.

Demo

Install

Methods

Method	Parameters	Description
getCanvasElement		retrieve the canvas react component.
getContext		get the context of the canvas.
getImageData	startX: integer. Default: 0 startY: integer. Default: 0 endX: integer. Default: the canvas width endY: integer. Default: the canvas height	get the image data of the canvas with a give area.

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"

Usage

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

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

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

  draw() {
    const canvas = this.myCanvas;

    /** Retrieve the HTML element of the canvas. */
    const element = canvas.getCanvasElement();

    /** Get the width and height of the canvas. */
    const { width, height } = element;

    /** Get the context of the canvas. */
    const context = canvas.getContext();

    /** Get the image data of the canvas with a give area. */
    const imageData = canvas.getImageData(startX, startY, endX, endY);

    /** ... **/
  }

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

  render() {
    return (
      <Canvas
        ref={myCanvas => (this.myCanvas = myCanvas)}
        onResize={this.resizeHandler}
        maintainPixelSize={false}
        contextType="2d"
      />
    );
  }
}

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