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