image must be initialized with a canvas instance

[sergey-kompaniets]

<View
        onStartShouldSetResponder={() => true}
        onResponderStart={this.mouseDownListener}
        onResponderMove={this.mouseMoveListener}
        onResponderRelease={this.mouseUpListener}
        style={{
          // flexGrow: 1,
          height: canvasHeight,
          alignItems: "center",
          marginTop: (3 * h) / 100
        }}
      >
        
        <View>
          <View
            style={{
              height: canvasHeight,
              width: bgWidth
              // backgroundColor: "green"
            }}
          >
            <Image
              source={bgImg}
              style={{
                // flexGrow: 1,
                width: null,
                height: "100%"
              }}
              resizeMode="contain"
            />
          </View>
          <View
            style={{
              height: canvasHeight,
              width: bgWidth,
              position: "absolute",
              alignItems: "center"
            }}
          >
            <Canvas
              ref={this.handleCanvas}
              style={
                {
                  // backgroundColor: "red"
                }
              }
            />
          </View>
        </View>
      </View>

[iddan]

Make sure to create CanvasImage like:

handleCanvas = canvas => {
    const image = new CanvasImage(canvas);
}

[sergey-kompaniets]

handleCanvas = canvas => {
    const { canvasHeight, canvasWidth, imgSrc } = this.props;

    const image = new CanvasImage(canvas);

    canvas.height = canvasHeight;
    canvas.width = canvasWidth;
    const ctx = canvas.getContext("2d");
    const rectX = 0;
    const rectY = 0;
    const rectWidth = canvasWidth;
    const rectHeight = canvasHeight;

    ctx.lineJoin = "round";

    image.src = `${RNFS.MainBundlePath}/assets/${imgSrc}`;

    image.addEventListener(
      "load",
      (drawImageCanvas = () => {
        ctx.drawImage(image, rectX, rectY, rectWidth, rectHeight);
      })
    );

    this.setState({ canvas: canvas });
  };

[sergey-kompaniets]

Make sure to create CanvasImage like:

handleCanvas = canvas => {
    const image = new CanvasImage(canvas);
}

This error show me after Actions.pop() or replace

[sergey-kompaniets]

@iddan, please help! image.removeEventListener() not working

[iddan]

removeEventListener() is not implemented currently

[sergey-kompaniets]

@iddan, how can I fix this problem?

[sergey-kompaniets]

@iddan, please, I need help

[iddan]

You can implement it if you'd like: take a look at how addEventListener() is implemented.

[neohuiji]

Hi, @iddan, I alse have this problem. I got Error: Image must be initialized with a Canvas instance.
Here is 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>
)

[iddan]

Needs investigation. Currently, I'm not available.

[kaidoj]

Canvas is not initialized when calling new CanvasImage. Something to do with render method of react-native. Seems I solved the problem with little workaround. Checking if canvas is set before CanvasImage does its own check.

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

    const image = new CanvasImage(canvas);

[iddan]

Oh right, refs in React can be null. Make sure to check that before using a canvas instance!