Unable to resize Canvas

After resizing the canvas, I am unable to draw any element. No error is raised, simply nothing appears on the canvas.

  render() {
    return (
        <Canvas ref={this.renderCanvas} style={{backgroundColor: "red"}} />
    )
  }

renderCanvas = (canvas) => {

      canvas.width = 400;
      canvas.height = 600;
      
    const context = canvas.getContext('2d');

    context.globalAlpha = 1.0;
    context.fillStyle = 'green';
    context.fillRect(0, 130, 50, 50);
}

[omnikron]

I’ve had success with this by

• using the ref callback to store a reference to the canvas on the component
• using componentDidMount to resize the canvas initially
• using componentDidUpdate to draw shapes based on props

You could do the drawing in componentDidMount as well, if you don’t need the canvas to redraw based on user input or whatever. Here’s an example of what I mean:

import React, { Component } from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import Canvas from "react-native-canvas";

const { width, height } = Dimensions.get('window');

export default class CanvasRectangles extends Component {
  componentDidMount() {
    this.canvas.width = width;
    this.canvas.height = height;
  };

  componentDidUpdate(props) {
    const context = this.canvas.getContext("2d");
    context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    props.rectangles.map(rectangle => {
      const { x, y, height, width } = rectangle;
      context.strokeRect(x, y, width, height);
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Canvas ref={(canvas: any) => (this.canvas = canvas)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    flex: 1,
    elevation: 1,
  }
});

[gc1508]

@omnikron Thanks Oli, your approach worked! @iddan I still believe that this should somehow be clarified/simplified… thanks!