CODEWITHSUNDEEP
javascripthtmlreactjscanvas
Rey Pena
Rey Pena

Reputation: 21

React render/update canvas

I'm learning react and I'm trying to render canvas from react and update it every time the state have been change.

//set initial state
constructor(props) {
    super(props);
    this.state = {
      imgFile: this.props.imgFile,
      show: false
    };
}

//The render canvas
render() {
    return (
      <div className="col-sm-4">
        <canvas ref={(c) => { this.myCanvas = c; }} />
      </div>
    );
  }

My question is: Is there any way to update canvas by the props? so far I got this:

componentDidMount() {
    const origin = this.state.imgFile;
    // canvas area/img calculations
    this.funcForDrawCanvas(origin.path, origin.presition, origin.height, origin.width);
}

but after it been the component been mount doesn't update it any more any idea? or is there a way to remove the canvas tag and put it again when the state is change ?

Upvotes: 2

Views: 4269

Answers (1)

Rob Brander
Rob Brander

Reputation: 3771

Use componentWillReceiveProps to detect changes in props and then use that to draw on the canvas.

Upvotes: 2

Related Questions