Puppeteer with ThreeJS - How can I make the background transparent?

Questions
1

I tried to give renderer alpha: true and it doesn’t work as I wanted it to be

puppeteer code

import puppeteer from 'puppeteer';
import path from 'path';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  const filePath = path.resolve('index.html');
  
  await page.goto(`file://${filePath}`);

  await page.setViewport({ width: 512, height: 512 });
  await page.evaluate(() => document.body.style.background = 'transparent');
  await page.screenshot({path: 'example.png', omitBackground: true});

  await browser.close();
})();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script>
        // Setting up stuff
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ alpha: true }); // Set alpha to true for transparency
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x00000000, 0); // Set clear color to transparent
        document.body.appendChild(renderer.domElement);

        // Funny little green cube
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Move the cam a little
        camera.position.z = 5;

        // Render
        function animate() {
            requestAnimationFrame(animate);

            // Rotate the cube
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>

</html>

When I try to screenshot this in puppeteer, I get this

screenshot
screenshot800×600 206 Bytes

The background is white, how can i make the background transparent?

2

The code is right it should be transparent is there something behind the canvas?

3

Oh, I found the solution, it was because i was not passing omitBackground: true when i screenshot the page, it makes the background transparent

await page.screenshot({path: 'example.png', omitBackground: true});

does this

example
example512×512 172 Bytes

await page.screenshot({path: 'example.png'});

does this

example
example512×512 158 Bytes