jw-canvas v0.1.8

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

Props

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"));