Need to draw a faded line with smooth corners.

Question

I draw a green line using an array of dots.

for(var i = this.trail.length - 1; i > -1 + 1; i--)
{
    var time = this.trail[i][0];
    var pos = this.trail[i][1];
    var pos2 = this.trail[i - 1][1];


    var difference = currentTime - time;

    var alpha = ((falloffTime - difference) / 255.0) / 255.0;

    if(alpha < 0)
        alpha = 0;


    pos = camera.WorldToScreen(pos.x, pos.y);
    pos2 = camera.WorldToScreen(pos2.x, pos2.y);

    con.moveTo(pos.x, pos.y);
    con.lineTo(pos2.x, pos2.y);

    con.lineWidth = 3;
    con.strokeStyle = "rgba(128, 190, 3, " + alpha + ")";
    con.stroke();
}

I am currently drawing it in a loop to set alpha.

However, the line that is drawn looks a bit jagged.

I know that if I draw everything as one line, I can use

con.lineJoin="round";

To make the ribs smooth. The problem is that if I draw everything as one line. I can't half disappear. Because if I use the gradient, it applies only to the first separate line, and not to the entire path.

Example

So my question. How can I draw a line with smooth edges and can I make it disappear?

Answer 1

JSFiddle , , , , . . ( 7):

var grad= ctx.createLinearGradient(50, 50, 150, 150);

. , , :

var grad= ctx.createLinearGradient(50, 50, 250, 250);

, , StrokeStyle , ( ).

, .