Image with transparent and stopping canvas from copying background pixels?

[lv2lrn4lf]

i have a canvas running webgl operations on it with some images that have transparencies in them. The canvas it self is transparent, but it seem to copy the pixel behind it... how do i stop it from doing that?

i did some research and came across this:

https://www.andersriggelsen.dk/glblendfunc.php
https://stackoverflow.com/questions/12273858/how-to-make-webgl-canvas-transparent
https://webgl2fundamentals.org/webgl/lessons/webgl-qna-how-to-make-webgl-canvas-transparent.html
https://www.andersriggelsen.dk/glblendfunc.php

and this

https://limnu.com/webgl-blending-youre-probably-wrong/

which brought me here

https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html

that show me all types of ways to mess with the canvas that i try but i couldn't get it to behave like the default behavior of the context 2d canvas, where a image can have transparent background and keep it transparent background even when animated. And not copy the pixels that is behind the canvas, because the canvas being transparent can see behind it....

Ideally think you tying to do some fireworks or confetti effect with webgl where it animate on a canvas with background transparent to show a image element with a picture of a reward one... but for some reason the pixel behind the canvas is getting copying as you animate the image and so you see the image transparent part fill in with the background and is no longer transparent.

[lv2lrn4lf]

I comprehended the solutions from this link:
http://learnwebgl.brown37.net/11_advanced_rendering/alpha_blending.html

[greggman]

Sounds like you found your answer. There's also this

https://stackoverflow.com/questions/39341564/webgl-how-to-correctly-blend-alpha-channel-png/39354174#39354174