javascript - Canvas | How do I create a Y-axis trail, from an X-axis moving object -

i'm making game in canvas/phaser @ moment , i'm looking solution following problem.

i need make y-axis trail object moves on x-axis, looks leaves dust trail.

however everywhere people creating trail bouncing balls or other x/y moving objects, not want create.

i using phaser game framework develop game, if there solution within framework supurb, if me pure canvas solution/idea great too!

i hope chose right words explanation, below added picture , small video visualizes wanted end result.

https://youtu.be/fd7voacekig?t=22m32s

i not know phaser, since asking plain canvas example, here 1 that:

fifo buffer (array)

you can use fifo buffer (first-in-first-out) or delay-buffer. store x and/or y value depending on needs buffer. when buffer full according predefined max value, first value thrown out.

now have tail values , can rendered anyway want.

demo

below store x. tail gradient defined. give best/smoothest result, can create array predefined color matching entries in fifo-buffer.

just aware in case need render solids (no alpha) or transition between each line segment visible.

and there it. make fit in render cycle.

performance tips:

• if move in y-direction gradient need follow. instead of creating new gradient every time, use translate() player head. translate gradient line definition.
• using typed array can improve performance if need many/long tails. these faster list/node arrays not come shift need use cyclic pointer instead.
• for game in video, render single tail once, reuse other heads.
• instead of using shadow glow in demo, use image head glow applied.

var ctx = document.queryselector("canvas").getcontext("2d");  ctx.fillstyle = "#fff";    var fifo = [],           // fifo buffer cycle older x values through      max = 30,            // max positions stored in buffer      = 0,               // demo, make x cycle on screen      size = 8,            // draw size      x = 300,             // x-pos mousemove event      y = 30,              // y-pos player head            // make gradient tail stroke:      // adjust range needed      gradient = ctx.createlineargradient(0, 30, 0, 280);    // brightest color on top, transparent color @ bottom.  gradient.addcolorstop(0, "#ccd");  gradient.addcolorstop(1, "rgba(200,200,240,0)");    // set canvas  ctx.strokestyle = gradient;  ctx.linewidth = 10;  ctx.linejoin = "round";  ctx.linecap = "square";    // glow effect (because can.. :) )  ctx.shadowcolor = "rgba(255,255,255,0.5)";  ctx.shadowblur = 20;    ctx.canvas.onmousemove = function(e) {    var rect = this.getboundingclientrect();    x = e.clientx - rect.left;  };    // main loop -  (function loop() {      // push new value(s) fifo array (for demo, x)    fifo.push(x);        // fifo buffer full? throw out first value    if (fifo.length > max) fifo.shift();      // render got;    ctx.clearrect(0, 0, 600, 480);        ctx.beginpath();    ctx.moveto(fifo[0], y + fifo.length * size);    for(var t = 1; t < fifo.length; t++) {      ctx.lineto(fifo[t], y + (fifo.length - t) * size);    }    ctx.stroke();        // draw main player head    ctx.translate(x, y);    ctx.rotate(0.25*math.pi);    ctx.fillrect(-size*0.5, -size*0.5, size*2, size*2);    ctx.settransform(1,0,0,1,0,0);                       requestanimationframe(loop)  })();

canvas {background:#000}

<canvas width=600 height=360></canvas>