Why doesn't the trail become completely transparent at some point? How do I fix it?

Question

If you look closely the background of the canvas is effected by the trail, and I don't want that.
https://code.sololearn.com/WXMODj836gdc/?ref=app

Answer 1

In the animate() method bevore update ball1 can be added:

c.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

The trail will be transparent after 10 mm

Answer 3

Thanks for your minus points for my answers. This is nice from you Karak10 .

Still I don't see any background changes on my display

Answer 4

Then I cannot understand what you want.

Answer 5

just change *0.9 by *0.8 in your loop updating alpha values of imageData.data to reduce delay of transparent trail ^^

however, that's not the most efficient way to do...

you rather should keep previous ball position and clear your canvas, then draw from n-1 ball position to actual position, increasing opacity from 0.x to 1 ;)

Answer 6

data[i] hold a 8 bit value (0 to 255), as every pixel componants (red, green, blue and alpha)...

however, by modifying the bitmap image of the canvas, you loose the canvas opacity: that's why clearing canvas and re-drawing all trail elements with progressive transparency would be a better practice, in addition to much more efficiency...

Answer 7

yes, 8 bits value for red, 8 bits value for green, 8 bits values for blue, and also 8 bits values for alpha (opacity)...
imageData.data hold a typedArray of unsigned 8 bits values, four per pixel ;)

Answer 8

JaScript I want to keep the trail effect though

Answer 9

JaScript I want the ball to have a trail effect, but I don't want the background to be changed where the ball has passed by, if you look closely the background changes to a little less white than it originally was everywhere the ball passes by, I want the trail to stay for a little while but become completely transparent after a certain time.

Answer 10

I think I found the problem, I continuously multiple the opacity of the pixels with 0.9, so they never actually reach 0, to fix that I added this line of code inside the loop that changes the opacity for all the pixels:

if(data[i] < 10){
data[i] = data[i] * 0;
}

I didn't know that but c.getImageData.data[i] does not return a value between 0 and 1 as I thought it would since it's opacity, it counts opacity with higher numbers I think, I don't completely understand it yet and I couldn't investigate more since SoloLearn's console sucks, but checking if the number it returns is less than 10 worked fine so I used this:
https://code.sololearn.com/Wy8Ot0Pr6s5j/?ref=app

Answer 11

visph I thought data[0] holds the value for red, data[1] holds the value of green, data[2] holds the value of blue and data[3] holds the value of opacity, all those for only the first pixel, and then the next four were for the second pixel, then the next four for the third and so on, so I wanted to change only the opacity value of all pixels by using this loop:

for(let i = 3; i < data.length; i += 4){
data[i] = data[i] * 0.9;
}

This was supposed to loop through only the opacity values of all pixels on the canvas and multiple them by 0.9 to decrease their opacity.

Answer 12

Still it's easier to make the trail effect this way, to make it the way you say I would have to keep the previous positions of the circle and it would need some more code, I can't really think of any simple way to do this right now since it would require me to keep a lot of coordinates and fillStyle values in order to create a big smooth trail effect. I'm gonna keep it the way it is since it seems to work well.