How to draw canvas trailing line with opacity

Question

I'm attempting to draw the rotating line in this canvas animation with trailing opacity but it's not working. I've seen this effect with rectangles and arcs but never with a line, so I'm not sure what I need to add.

function radians(degrees) {
  return degrees * (Math.PI / 180);
}

var timer = 0;

function sonar() {
  var canvas = document.getElementById('sonar');
  if (canvas) {
    var ctx = canvas.getContext('2d');
    var cx = innerWidth / 2,
        cy = innerHeight / 2;

    canvas.width = innerWidth;
    canvas.height = innerHeight;

    //ctx.clearRect(0, 0, innerWidth, innerHeight);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fillRect(0, 0, innerWidth, innerHeight);

    var radii = [cy, cy - 30, innerHeight / 3.33, innerHeight / 6.67];

    for (var a = 0; a < 4; a++) {
      ctx.beginPath();
      ctx.arc(cx, cy, radii[a], radians(0), radians(360), false);
      ctx.strokeStyle = 'limegreen';
      ctx.stroke();
      ctx.closePath();
    }

    // draw grid lines
    for (var i = 0; i < 12; i++) {
      var x = cx + cy * Math.cos(radians(i * 30));
      var y = cy + cy * Math.sin(radians(i * 30));
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(x, y);
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'rgba(50, 205, 50, 0.45)';
      ctx.stroke();
      ctx.closePath();
    }

    if (timer <= 360) {
      timer++;
      ctx.beginPath();
      ctx.fillstyle = 'limegreen';
      ctx.moveTo(cx, cy);
      ctx.lineTo(cx + cy * Math.cos(radians(timer)), cy + cy * Math.sin(radians(timer)));
      ctx.strokeStyle = 'limegreen';
      ctx.stroke();
      ctx.closePath();
    } else {
      timer = 0;
    }
    requestAnimationFrame(sonar);
  }
}
sonar();

jsbin example

Answer 1

Canvas stack trails.

Below is a quick demo of how to use a stack of canvases to create a trailing effect.

You have a normal on screen canvas (this FX will not effect it) and then a stack of canvases for the trail FX. Each frame you move to the next canvas in the stack, first slightly clearing it then drawing to it what you want to trail. Then you render that canvas and the one just above it to the canvas.

A point to keep in mind is that the trails can also have a hugh range of FX, like blurring (just render each frame stack on itself slightly offset each time you render to it), zoom in and out trails. Trails on top or trails under. You can change the trail distance and much more.

It is overkill but over kill is fun.

The slider above the demo controls the trail length. Also the code need babel because I dont have time to write it for ES5.

Top slider is trail amount.One under that is trail distance. Trail dist does not transition well. Sorry about that.

//==============================================================================
// helper function
function $(query,q1){
    if(q1 !== undefined){
        if(typeof query === "string"){
            var e = document.createElement(query);
            if(typeof q1 !== "string"){
                for(var i in q1){
                    e[i] = q1[i];
                }
            }else{
                e.id = q1;
            }
            return e;            
        }
        return [...query.querySelectorAll(q1)];
    }
    return [...document.querySelectorAll(query)];
}
function $$(element,e1){
    if(e1 !== undefined){
        if(typeof element === "string"){
            $(element)[0].appendChild(e1);
            return e1;
        }
        element.appendChild(e1);
        return e1;
    }
    document.body.appendChild(element);
    return element;
}
function $E(element,types,listener){
    if(typeof types === "string"){
        types = types.split(",");
    }
    element = $(element)[0];
    types.forEach(t=>{
        element.addEventListener(t,listener)    
    });
    return element;
}
function R(I){
    if(I === undefined){
        return Math.random();
    }
    return Math.floor(Math.random()*I);
}
//==============================================================================


//==============================================================================
// answer code 

// canvas size
const size = 512;
const trailDist = 10; // There is this many canvases so be careful
var trailDistCurrent = 10; // distance between trails
var clearAll = false;

// create a range slider for trail fade
$$($("input",{type:"range",width : size, min:0, max:100, step:0.1, value:50, id:"trail-amount",title:"Trail amount"}));
$("#trail-amount")[0].style.width = size + "px";
$E("#trail-amount","change,mousemove",function(e){fadeAmount = Math.pow(this.value / 100,2);});

// create a range slider trail distance
$$($("input",{type:"range",width : size, min:2, max:trailDist , step:1, value:trailDist , id:"trail-dist",title:"Trail seperation"}));
$("#trail-dist")[0].style.width = size + "px";
$E("#trail-dist","change,mousemove", function(e){
     if(this.value !== trailDistCurrent){
         trailDistCurrent= this.value;
         clearAll = true;
     }
});

$$($("br",""))  // put canvas under the slider

// Main canvas
var canvas;
$$(canvas = $("canvas",{width:size,height:size})); // Not jquery. Just creates a canvas
                                                 // and adds canvas to the document
var ctx = canvas.getContext("2d");

// Trailing canvas
var trailCanvases=[];
var i =0;  // create trail canvas
while(i++ < trailDist){trailCanvases.push($("canvas",{width:size,height:size}));}
var ctxT = trailCanvases.map(c=>c.getContext("2d"));  // get context
var topCanvas = 0;
var fadeAmount = 0.5;

// Draw a shape
function drawShape(ctx,shape){
    ctx.lineWidth = shape.width;
    ctx.lineJoin = "round";
    ctx.strokeStyle = shape.color;
    ctx.setTransform(shape.scale,0,0,shape.scale,shape.x,shape.y);
    ctx.rotate(shape.rot);
    ctx.beginPath();
    var i = 0;
    ctx.moveTo(shape.shape[i++],shape.shape[i++]);
    while(i < shape.shape.length){
        ctx.lineTo(shape.shape[i++],shape.shape[i++]);
    }
    ctx.stroke();
}

// Create some random shapes
var shapes = (function(){
    function createRandomShape(){
        var s = [];
        var len = Math.floor(Math.random()*5 +4)*2;
        while(len--){
            s[s.length] = (R() + R()) * 20 * (R() < 0.5 ? -1 : 1);
        }
        return s;
    }
    var ss = [];
    var i = 10;
    while(i--){
        ss[ss.length] = createRandomShape();
    }
    ss[ss.length] = [0,0,300,0]; // create single line

    return ss;
})();

// Create some random poits to move the shapes
var points = (function(){
    function point(){
        return {
            color : "hsl("+R(360)+",100%,50%)",
            shape : shapes[R(shapes.length)],
            width : R(4)+1,
            x : R(size),
            y : R(size),
            scaleMax : R()*0.2 + 1,
            scale : 1,
            s : 0,
            rot : R()*Math.PI * 2,
            dr : R()*0.2 -0.1,
            dx : R()*2 - 1,
            dy : R()*2 - 1,
            ds : R() *0.02 + 0.01,
        }
    }
    var line = shapes.pop();
    var ss = [];
    var i = 5;
    while(i--){
        ss[ss.length] = point();
    }
    var s = ss.pop();
    s.color = "#0F0";
    s.x = s.y = size /2;
    s.dx = s.dy = s.ds = 0;
    s.scaleMax = 0.5;
    s.dr = 0.02;
    s.shape = line;
    s.width = 6;
    ss.push(s);



    return ss;    
})();




var frameCount = 0;  // used to do increamental fades for long trails
function update(){
   // to fix the trail distance problem when fade is low and distance high
     if(clearAll){
         ctxT.forEach(c=>{
             c.setTransform(1,0,0,1,0,0);
             c.clearRect(0,0,size,size);
         });
        clearAll = false;
    }

    frameCount += 1;
    // get the next canvas that the shapes are drawn to.
    topCanvas += 1;
    topCanvas %= trailDistCurrent;
    var ctxTop = ctxT[topCanvas];
    // clear the main canvas
    ctx.setTransform(1,0,0,1,0,0);  // reset transforms
    
    // Fade the trail canvas
    ctxTop.setTransform(1,0,0,1,0,0);
    ctx.clearRect(0,0,size,size);  // clear main canvas
    // slowly blendout trailing layer
    if(fadeAmount < 0.1){ // fading much less than this leaves perminant trails
                          // so at low levels just reduce how often the fade is done
                          
        if(((Math.floor(frameCount/trailDistCurrent)+topCanvas) % Math.ceil(1 / (fadeAmount * 10))) === 0 ){
            ctxTop.globalAlpha = 0.1;
            ctxTop.globalCompositeOperation = "destination-out";
            ctxTop.fillRect(0,0,size,size);
        }
    }else{
        ctxTop.globalAlpha = fadeAmount;
        ctxTop.globalCompositeOperation = "destination-out";
        ctxTop.fillRect(0,0,size,size);
    }
    ctxTop.globalCompositeOperation = "source-over";
    ctxTop.globalAlpha = 1;

    // draw shapes
    for(var i = 0; i < points.length; i ++){
        var p = points[i];
        p.x += p.dx;  // move the point
        p.y += p.dy;
        p.rot += p.dr;
        p.s += p.ds;
        p.dr += Math.sin(p.s) * 0.001;
        p.scale = Math.sin(p.s) * p.scaleMax+1;
        p.x = ((p.x % size) + size) % size;
        p.y = ((p.y % size) + size) % size;
        drawShape(ctxTop,p); // draw trailing layer (middle)
    }
    // draw the trail the most distance from the current position
    ctx.drawImage(trailCanvases[(topCanvas + 1)%trailDistCurrent],0,0);

    // do it all again.
    requestAnimationFrame(update);
}
update();

Answer 2

Here are two ways to do this: with a gradient and by adding translucent lines.

Sidenote, you should try and only redraw what you need to redraw. I separated the canvases and put one on top of the other so that we don't redraw the grid all the time.

function radians(degrees) {
  return degrees * (Math.PI / 180);
}





var timer = 0;
function trail() {
   var canvas = document.getElementById('trail');
  
   var ctx = canvas.getContext('2d');
   ctx.clearRect(0, 0, innerWidth, innerHeight);
   var cx = innerWidth / 2,
       cy = innerHeight / 2;
  canvas.width = innerWidth;
    canvas.height = innerHeight;
   if (timer <= 360) {
      timer++;
      ctx.beginPath();
      ctx.fillstyle = 'limegreen';
 
      ctx.moveTo(cx, cy);
      ctx.arc(cx,cy,cy,radians(timer-30),radians(timer));
      ctx.lineTo(cx + cy * Math.cos(radians(timer)), cy + cy * Math.sin(radians(timer)));
     var gradient = ctx.createLinearGradient(
cx+cy*Math.cos(radians(timer)),             cy+cy*Math.sin(radians(timer)),  
cx+cy*0.9*Math.cos(radians(timer-30)),             cy+cy*0.9*Math.sin(radians(timer-30)));
      gradient.addColorStop(0,'limegreen');
      gradient.addColorStop(1,'transparent');
      ctx.strokeStyle='transparent';
      
      ctx.fillStyle =  gradient;
      ctx.fill();
      
      
     
     ctx.beginPath();
     var fade = 10;
     for(var i =0;i<fade;i++)
     {
       
       ctx.moveTo(cx, cy);
      ctx.lineTo(cx+cy*Math.cos(radians(180+timer-i*1.3)),cy+cy*Math.sin(radians(180+timer-i*1.3)));
       ctx.strokeStyle ="rgba(50,205,50,0.1)"; 
       ctx.lineWidth=5;
       ctx.closePath();
       ctx.stroke();
     }
     
    } else {
      timer = 0;
    }
    requestAnimationFrame(trail);
 }
function sonar() {
  var canvas = document.getElementById('sonar');
  if (canvas) {
    var ctx = canvas.getContext('2d');
    var cx = innerWidth / 2,
        cy = innerHeight / 2;
 
    canvas.width = innerWidth;
    canvas.height = innerHeight;

    //ctx.clearRect(0, 0, innerWidth, innerHeight);

    var radii = [cy, cy - 30, innerHeight / 3.33, innerHeight / 6.67];

    for (var a = 0; a < 4; a++) {
      ctx.beginPath();
      ctx.arc(cx, cy, radii[a], radians(0), radians(360), false);
      ctx.strokeStyle = 'limegreen';
      ctx.stroke();
      ctx.closePath();
    }

    // draw grid lines
    for (var i = 0; i < 12; i++) {
      var x = cx + cy * Math.cos(radians(i * 30));
      var y = cy + cy * Math.sin(radians(i * 30));
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(x, y);
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'rgba(50, 205, 50, 0.45)';
      ctx.stroke();
      ctx.closePath();
    }

   }
 }
  sonar();
  trail();

canvas{
position: absolute;
  }

<canvas id=sonar></canvas>
<canvas id=trail></canvas>

Answer 3

The problem is that to get this effect, you need to draw a triangle with a gradient along an arc, and you can't do that in a canvas. Gradients must be linear or radial.

The other option is to have an inner loop run each time you want to draw the sweeper, and go backwards from your sweeper line, drawing with slightly less opacity each time. But lets say you want your sweep to cover 15 degrees--obviously, if you have a 100% opacity line at d and a 5% opacity line at d - 15, that doesn't do the trick. So start filling in more lines, and more lines...you will have to draw so many lines to make it seem filled your performance would probably suffer.

My suggestion--you shouldn't have to redraw that on every frame. I would just make a PNG that looks like you want it to, and then place it and just rotate it around the center on each frame. No need to redraw it all the time then. That will be much faster than drawing a bunch of lines.