Not able to render image on ios 15.2.1

[kalyanipullela]

Hello,

The image is loaded perfectly on ios simulators but on the real device the image is not displaying instead displaying a white blank screen. I've used react-native-canvas version 0.1.38 and ios version is 15.2.1 Following is the code snippet I've tried

const handleCanvas = () =>{ 
const image = new CanvasImage(canvas);
          console.log("image",image)
          canvas.width = Dimensions. get('window'). width;
          canvas.height = Dimensions. get('window'). height;
         const ctx = canvas.getContext('2d');
//Not entering into this function on real devices but working on simulators
          image.addEventListener('load', () => {
              ctx.drawImage(image, 0, 0, 651, 442);
            }); 
}

<Canvas ref={handleCanvas}/>

Any help is appreciated

Thank you in advance

[tyawei]

me too ios version is 15.6.1

[nora-soderlund]

Where are you setting the source? And where is your canvas variable being declared?

[ntrpnr]

I'm seeing the same issue here. Works on Android.

[JRfan123]

i also see the issue, if image.src ='file://' which in the local system file ,it can't draw , but the image.src="https://" link ,it is ok in ios 15. and drawImage can't set crossOrigin

const drawImage = (imageUri: string) => {
    if (!curImageTransform || !curImageSize) return;
    const ctx = getCtx(bgCanvasRef);
    if (!ctx) {
      console.log('app error: ctx null');
      return;
    }
    clearCanvas(ctx);
    const img = new CanvasImage(bgCanvasRef.current!);
    // img.crossOrigin = 'anonymous';
    console.log('imageUri:', imageUri);
    img.src = imageUri;
    img.addEventListener('load', () => {
      console.log('load:', curImageTransform, curImageSize);
      ctx.drawImage(
        img,
        curImageTransform.offsetX,
        curImageTransform.offsetY,
        curImageSize.width,
        curImageSize.height,
      );
    });
  };