Wave with pointer

by Laxmikant Dange

HTML

<canvas id='can' width=1300 height=800></canvas>

JavaScript

var ctx;
function init(){
    ctx=document.getElementById('can').getContext('2d');
    ctx.canvas.width=1300;
    ctx.canvas.height=800;
    //ctx.scale(0.5,0.5)
    ctx.fillStyle='#AAA'
    for(var x=30;x<510;x++){
        var y=Math.sin(Math.PI/180*x)*100;
        ctx.beginPath();
        ctx.arc(x+500,y+500,5,0,Math.PI*2);
        ctx.fill();
    }
    
}
var x=0;
function drawPointer(){
     init();
    var tailSize=50;
    for(var i=0;i<tailSize;i++){
        var y=Math.sin(Math.PI/180*(x-i))*100;
        ctx.beginPath();
        ctx.arc(x+500-i,y+500,5,0,Math.PI*2);
        ctx.fillStyle='rgba(0,0,0,'+(1-(i/tailSize))+')';
        ctx.fill();
    }
    x++;
    if(x>500)return;
    setTimeout(drawPointer,1);
}
init();

drawPointer()