canvas

A canvas react UI component. It hooks into resize on browser and itself to prevent the canvas from stretching.

install

Usage

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

import Canvas from "@jworkshop/canvas";

import "./style.css";

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

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

  someFunction() {
    const canvas = this.myCanvas;

    /** Retrieve the canvas react component. */
    canvas.getCanvasElement();

    /** Get the width of the canvas react component. */
    canvas.getCanvasWidth();

    /** Get the width of the canvas react component. */
    canvas.getCanvasHeight();

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

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

  resizeHandler(width, height) {
    // Do you stuff
  }

  render() {

    return (
      <Canvas
        ref={myCanvas => this.myCanvas = myCanvas}
        className="className"
        style={ ... }
        canvasClassName="canvasClassName"
        canvasStyle={ ... }
        onResize={this.resizeHandler}
      />
    );
  }
}

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