+ 1

JavaScript Canvas transparency problem

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?

21st Feb 2021, 3:04 AM
Karak10
Karak10 - avatar
3 odpowiedzi
+ 2
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
21st Feb 2021, 12:51 PM
visph
visph - avatar
+ 1
Link your code please
21st Feb 2021, 3:05 AM
Pieter Edwards
Pieter Edwards - avatar
0
ŚĄŃ 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
21st Feb 2021, 11:53 AM
Karak10
Karak10 - avatar