How can I make the background transparent?

[giacomotg]

Hey there! That's an amazing WebGL simulation, congratz!

I'm using this simulation in a Webflow project and it's working, however, I would like to change the black background to transparent. Is there a piece of code that I can use to make the background transparent?

Thanks in advance.

[giacomotg]

That's how my code looks like inside the head tag:

  `<script type="text/javascript" src="https://paveldogreat.github.io/WebGL-Fluid-Simulation/dat.gui.min.js"></script>
			<script src="./script.js"></script>
    <style>
        * {
            user-select: none;
        }

        body {
            margin: 0;
            position: relative;
            width: 100%;
            height: 100%;
        }

        canvas {
            width: 100%;
            height: 100%;
      			opacity: 60%;
        }
                 
        .dg {
        display: none !important;
        }
        
    </style>
    <script>
        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
        ga('create', 'UA-105392568-1', 'auto');
        ga('send', 'pageview');
    </script>`

and here's the code before the body tag: <script src="https://uploads-ssl.webflow.com/5d7517ff7288d5a70b3b64bd/5e862c4494f87c06e96fcbad_script.txt"></script>

[cloydlau]

import WebglFluid from 'webgl-fluid'

transparent:

WebglFluid(document.querySelector('canvas'), {
  TRANSPARENT: true,
})

white:

WebglFluid(document.querySelector('canvas'), {
  BACK_COLOR: { r: 255, g: 255, b: 255 },
})

[jpfaraj]

I am new to code, looking to implement this into my project. I have everything set up, but can't seem to get the background to change colors.

I added your code to the header code in webflow under it's own script stage, but nothing changed.

Please help :)

[360fun]

set

TRANSPARENT: true;

comment these lines to avoid to draw the checkerboard:

    //if (target == null && config.TRANSPARENT)
        //drawCheckerboard(target);