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: 0startY: integer. Default: 0endX: integer. Default: the canvas widthendY: 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"));