React-Native-Canvas Not Drawing Entire Rectangle

Question

While I was making another app, I ran into an issue with react-native-canvas , so I created this minimal project. The issue is that the WebView is much smaller than the Canvas and does not fill up the entire canvas when it should. Here is the code (very similar to the example code ):

import React, { Component } from 'react';
import { View } from "react-native"
import Canvas from 'react-native-canvas';

export default class App extends Component {

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 350, 700);
  }

  render() {
    return (
      <View style={{
        width: 350,
        height: 700
      }}>
        <Canvas ref={this.handleCanvas} style={{
          width: 350,
          height: 700,
          borderWidth: 1,
          borderColor: "red"
        }} width={350} height={700} />
      </View>
    )
  }
}

Here is a screenshot from the app: As you can see, the code, which should render the rectangle to the full size of the canvas (outlined in red), does not do so. According to the Expo Inspect-Element debug tool, the WebView (which is the entire rectangle) is only 300 x 150 pixels.

Am I missing something obvious? Or is this a bug with the react-native-canvas ?

This is on Android by the way.

Answer 1

Put this in your handleCanvas:

canvas.width = 400;
canvas.height = 700;