JavaScript Canvas transparency problem

Question

So, I'm making a project, in which there are some moving lines and in order to create a smooth trail while the lines move I fill the whole screen with a rectangle which I give a color using rgba to add transparency, this works fine, however, this also removes the transparent background of the canvas, I wanted to make the canvas take the whole screen and that creates problems, so I was looking for a way to make that trail effect using another way, so that the pixels that are being animated are slowly becoming invisible, and I want the canvas to keep a transparent background so it can be used for the whole screen of the page, at first I thought maybe I could use clearRect and use globalAlpha to reduce it's transparency but it doesn't work, any ideas of how I could do this?

Answer 1

you must save image, clearRect, and then before drawing the next image, copy image with less alpha chanel... this will downgrade frame per seconds, but will do the trick for trail effect (applied to all drawed object: if you want only trail effect on some elements, you need to redraw only those objects with less alpha instead of copying full image... this could improve frames per second):

https://code.sololearn.com/WY4NjyD4cenw/?ref=app

Answer 2

Link your code please

Answer 3

ŚĄŃ the problem is that the page behind the canvas is not visible, so if I wanted to scale the canvas to take the whole screen so that moving circles were moving all around the page everything behind the canvas wouldn't be visible, I wanted to find a way to make the trail effect and keep the transparency of the canvas. You can see here that the background of the page is not visible:
https://code.sololearn.com/WUpWBtbDcijw/?ref=app