Trying to use React Native Canvas with Gesture Responder in Views

[joshiatharva]

Hi all,
I'm trying to use React Native Canvas to build a Canvas tool for drawing DFAs. I'm trying
to create this from the Javascript version (excerpt below).

var canvas = document.getElementById('canvas');
var touchX, touchY;
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}

function drawCircle(ctx, x, y, size) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI*2, false);
    ctx.stroke();
}

However, in React Native the ctx variable only exists within the handleCanvas() method in the example given in the repo, whereas I want to use GestureResponder to execute drawCircle() on any touch on the . How can I store/handle the value of ctx to be able to draw outside handleCanvas(), so I can execute drawCircle() on any touch on the view. The RN code is given below:

handleCanvas = (canvas) => {
  var ctx = canvas.getContext("2d"); 
}

drawCircle = (evt) => {
  ctx.beginPath();
  ctx.arc(evt.pageX, evt.pageY, 12, 0, Math.PI*2, true);
  ctx.stroke();
}

render() {
  return (
  <View onStartShouldSetResponder={(evt) => true} onResponderRelease= 
     {this.drawCircle}>
     <Canvas ref={this.handleCanvas} />
  </View>
  );
}

[iddan]

You should save ctx on this to access it from drawCircle()

[joshiatharva]

Hi @iddan, thanks for the response. Would that be as a variable in constructor, like:

constructor() {
    this.ctx = null;
}

handleCanvas = (canvas) = {
    this.ctx = canvas.getContext("2d");
}

this.setState({ctx: canvas.getContext("2d")}) always returns undefined so does not work.

[iddan]

Yeah, the code you provided is okay. Just make sure to check canvas is not null

[joshiatharva]

Hi @iddan, I now have another problem. When running this package with a blank Expo project, I encapsulate the Canvas example with a View in order to style it, but anytime I make some changes to my code and hot-reload the app, I get a RedBox error: "undefined is not an object (at this.handleCanvas)" but the stack trace points to withExpoRoot.js, not any line within my code. Screenshots of the code here:

[iddan]

Please provide code examples with code blocks. I have not used expo so I'm not sure why is it happening. Maybe someone else here can help?