Converting canvas to image doesn't work

Questions
1

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:

renderer.domElement.toDataURL();

And here’s the snippet:

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

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 (
      canvas
    ) {
      const link = document.createElement("a");
      link.download = "demo.png";
      link.href = canvas.toDataURL("image/png", 1);
      link.target = "_blank";
      link.click();
    });
2

Seems to work just fine: https://jsfiddle.net/h6grw9a8/3/

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