putImageData is not drawing anything in the canvas

canvasContext.putImageData(data,0,0) not drawing anything

I’m trying to pass an ImageData element to the canvas so it’s displayed on it, my code looks like:

import Canvas, {ImageData} from 'react-native-canvas';

...

const handleCanvas = async canvas => {
    canvas.width = sizes.width;
    canvas.height = sizes.height;
    const ctx = canvas.getContext('2d');

    const data = await ctx.createImageData(
      encodedImage.width,
      encodedImage.height,
      encodedImage.data,
    );

    console.log(
      'data',
      data,
      data instanceof ImageData,
      'encoded',
      encodedImage,
      encodedImage instanceof ImageData,
    );

    await ctx.putImageData(data, 0, 0);
  };

...

{encodedImage && (
            <Canvas
              ref={handleCanvas}
              style={{borderWidth: 1, borderColor: 'red', zIndex: 1000000}}
            />
)}

Outputs:

encodedImage is a black and white ImageData mask from https://www.npmjs.com/package/@tensorflow-models/body-pix#returns-4

Canvas is that red box:

Nothing is painted inside when using putImageData with Outputs data.

If I try to pass the ImageData to another canvas context I get the following error: Error: Argument 1(‘imagedata’) to CanvasRenderingContext2D.putImageData must be an instance of ImageData

[QuevedoIB]

My workaround is to initialize with new ImageData(…) and then add the properties to the instance.

 const handleCanvas = async canvas => {
    canvas.width = sizes.width;
    canvas.height = sizes.height;
    const ctx = canvas.getContext('2d');

    const data = new ImageData(canvas);

    data.data = encodedImage.data;
    data.width = encodedImage.width;
    data.height = encodedImage.height;

    console.log(data, data instanceof ImageData);

    await ctx.putImageData(data, 0, 0);
  };

That way I get the desired ImageData instance with the proper data, but putImageData still does nothing to the canvas. (Nothing is drawn) Did someone get putImageData working before?

[bbhopesh]

I am also facing bug with putDataImage. When I run example app without any changes, it renders differently on different platforms. Check top left rectangle in two images below, one is from an emulator and one is from real phone. However, both are rendering wrong. If code was behaving correctly, entire top left rectangle would have been black.