Best way to create fading trails?

[kentskyo]

So in Processing doing something like this:
 

void draw() {

fill(0, 12);

rect(0, 0, width, height);

float d = dist(x, y, targetX, targetY);

if (d > 1.0) {

    x += (targetX - x) * easing;

    y += (targetY - y) * easing;

}

fill(255);

ellipse(x, y, 20, 20);

}

 

Creates a fading trail by overwriting the canvas with a partial transparency layer that will build in opacity over time. I recreate the same effect with pixi.js here: 

 

http://codepen.io/kentskyo/pen/KwYLgv

 

...but I'm wondering if this is the best way to do this? Adding new graphics objects on top of new graphics objects seems like it could get me into trouble resource-wise, but I'm not sure how to simply draw an object to canvas in pixi and have it persist and then draw it again without going through the steps of creating new objects? Or perhaps there is another approach I'm missing as I'm just starting with this. Any insight appreciated. Thanks!

-K 

 

[kentskyo]

OK, found a better way!...reusing the same graphics object...

function mainLoop() {  var d = dist(x, y, targetX, targetY);  if (d > 1.0) {    x += (targetX - x) * easing;    y += (targetY - y) * easing;    fade.beginFill(0x000000,0.03);    fade.drawRect(0, 0, renderer.width, renderer.height);    fade.endFill();                     fade.beginFill(0x0cf727);    fade.drawEllipse(x, y, 20, 20);    fade.endFill();               }  renderer.render(stage);            requestAnimationFrame(mainLoop);}

http://codepen.io/kentskyo/pen/ragamj

[trusktr]

Can you explain how this works? I don't see how the trail stays behind and slowly fades out. I see you are drawing a new rect and ellipse every frame, but I'm not sure how that results in a fade. Thanks in advance! :} - Joe

[xerver]

Have a render texture and each frame render to it and then lower the alpha.