Animation of Arc on Canvas

by nisar mohamed

HTML

<html>
    <head>
        </head>

<body>
    <canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>

JavaScript

var currentEndAngle = 0
var currentStartAngle = 0;
var currentColor = 'black';
var lineRadius = 75;
var lineWidth = 15;

setInterval(draw, 50);


function draw() { /***************/

    var can = document.getElementById('canvas1'); // GET LE CANVAS
    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius;
    var width;

    var startAngle = currentStartAngle * Math.PI;
    var endAngle = (currentEndAngle) * Math.PI;
    
    currentStartAngle = currentEndAngle - 0.01;
    currentEndAngle = currentEndAngle + 0.01;
    
   
      
      currentColor = "black";
      radius = lineRadius;
      width = lineWidth;
   
            
   
    context.clearRect(0,0,400,200);
    context.beginPath();
    context.moveTo(x,y);
    x1=Math.cos(startAngle)*radius+10;
    y1=Math.sin(startAngle)*radius+10;
    console.log(x1,y1);
    context.lineTo(x1,y1);
    context.stroke();

    /************************************************/
}