Converting canvas to image doesn't work

Hi there,
I’m trying to capture a 2D image from a canvas that has a background image, But when I save the image, There is a white screen only.

Here’s my code:


And here’s the snippet:

const link = document.createElement("a"); = "demo.png";
link.href = this.renderer.domElement.toDataURL(); = "_blank";;

I must add I’ve tried to capture using html2canvas but the output image only contains a pale version of the background image and there is no sign of the 3D image that I’ve loaded.
And here’s the snippet:

html2canvas(this.threeCanvasRef.current, { allowTaint: true }).then(function (
    ) {
      const link = document.createElement("a"); = "demo.png";
      link.href = canvas.toDataURL("image/png", 1); = "_blank";;

Seems to work just fine:

Note, that you have to set preserveDrawingBuffer to true when creating the renderer.

1 Like