Offscreen canvas

[RinatRezyapov]

Hi!
Is it possible to draw from offscreen canvas to main canvas using drawImage?

I'm doing something like this (it's working in the browser) but not getting any results:

  const handleCanvas = (canvas) => {
    if (!canvas) return;
    const offscreenCanvas = document.createElement('canvas');
    const offscreenCanvasCtx = offscreenCanvas.getContext('2d');
    offscreenCanvasCtx.fillStyle = 'red';
    offscreenCanvasCtx.fillRect(0, 0, 1000, 1000);

    const ctx = canvas.getContext('2d');

    ctx.drawImage(offscreenCanvas, 0, 0, 100, 100, 0, 0, 100, 100);
  }



  return (<View style={styles.container}>
    <GCanvasView
      style={{
        width: 1000,
        height: 1000, 
        position: 'absolute',
        left: 1000,
        top: 0,
        zIndex: -100,
      }}
      offscreenCanvas={true}
      onCanvasCreate={(canvas) => setOCanvasReady(true)} 
      devicePixelRatio={1}
      isGestureResponsible={false}
    />
    {oCanvasReady && (
      <GCanvasView
        onCanvasResize={() => {}}
        onCanvasCreate={handleCanvas}
        onIsReady={(value) => setIsGReactTextureViewReady(value)}
        isGestureResponsible={true}
        isAutoClearRectBeforePutImageData={false}
        devicePixelRatio={undefined}
        style={styles.gcanvas}
      />
    )}
  </View>

  );

[flyskywhy]

Just fixed it in README.md 😝 :

Since offscreen canvas is used frequently with ctx.drawImage(), so please pay attention to the quirk of @flyskywhy/react-native-gcanvas:

this.ctx.drawImage(offscreenCanvas, 0, 0, 100, 100, 0, 0, 100, 100);

// if ctx.drawImage(offscreenCanvas) is not follow by some ctx.some(),
// will cause image not display on screen #59, so just ctx.some() here.
this.ctx.fillStyle = '#19491001';