I switched from using 2D context to using WebGL context. I'm trying to figure out a way to wait until pixels have been drawn onto the screen.

With 2D context I would do something like this

const handlePaintFrame = () => {
  const ctx: CanvasRenderingContext2D | any = videoCanvasRef?.current?.getContext("2d");

  if (video.current && videoCanvasRef.current && ctx) {
    if (chroma?.keyColor) {
      drawChromaFrame(ctx, width, height);
    } else {
      ctx.drawImage(video.current, 0, 0, width, height);
    }

    const rendered = () => {
      setTimeout(() => {
        onReady("video");
      }, 20);
    };

    const startRender = () => {
      requestAnimationFrame(rendered);
    };

    const img = new Image();

    img.onload = () => {
      requestAnimationFrame(startRender);
    };

    img.onerror = (e: any) => {
      console.log("Image error:", { e });
    };

    img.src = videoCanvasRef.current.toDataURL();
  }
};

Currently my draw code for the WebGL context is something like this

const drawTexture = () => {
  // render
  if (gl && video.current) {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video.current);
    drawScene(locationRef.current, buffersRef.current);
  }
};

const handlePaintFrame = () => {
  if (video.current) {
    if (chroma?.keyColor) {
      // drawChromaFrame(ctx, width, height);
    } else {
      drawTexture();

      // TODO: We need to wait until texture is drawn
      setTimeout(() => {
        onReady("video");
      }, 100);
    }
  }
};