'react-native-canvas' return `Error: Image must be initialized with a Canvas instance`

Question

I am using react-native-canvas and want to draw some pictures, but it went wrong when I try to draw pictures.

I read some issues on github , but It does not work for me.

Here's my code :

import Canvas, { Image as CanvasImage } from 'react-native-canvas';
import RNFS from 'react-native-fs';


    const _handleCanvas = (canvas) => {
        const image = new CanvasImage(canvas);
        canvas.width = 500;
        canvas.height = 500;
        image.src = `${RNFS.MainBundlePath}/${viewerData[0].path}`;
        console.log('image src: ', image.src);
        // the log here is ·undefined/../../images/3.jpg·
        const context = canvas.getContext('2d');
        image.addEventListener('load', () => {
            context.drawImage(image, 0, 0, 500, 500);
        });
    };

    return ( 
      <View>
            <Canvas ref={_handleCanvas} />
      </View>
)

I expect to draw some thing, how could I fix my code?

Answer 1

const image = new Image(canvas, height, width);

There should be a parameter of height and width when creating a constructor, as shown above, but the parameter does not have a height and a width . Could you try this?

   const _handleCanvas = (canvas) => {
        width = 500;
        height = 500;
        const image = new CanvasImage(canvas, height, width);

Answer 2

Also making sure the ref isn't null:

handleCanvas = (canvas) => {
    if (!(canvas instanceof Canvas)) {
      return;
    }

    const image = new CanvasImage(canvas);
    ...

For reference: https://github.com/iddan/react-native-canvas/issues/133#issuecomment-581139760