JSFiddle - React, Tailwind, and code Playground

by YoungDeveloper

HTML

<body>
    <canvas id="canvas" width="100" height="100"></canvas>
    <p>Current Angle:</p>
    <p id="angle">0</p>
</body>

JavaScript

var Canvas = document.getElementById("canvas");
    var ctx = Canvas.getContext("2d");
    
    var startAngle = (2*Math.PI);
    var endAngle = (Math.PI*1.5);
    var currentAngle = 0;
    
    var raf = window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;
    
    function Update(){
        //Clears
        ctx.clearRect(0,0,Canvas.width,Canvas.height);
        
        //Drawing
        ctx.beginPath();                  
        ctx.arc(40, 40, 30, startAngle + currentAngle, endAngle + currentAngle, false);
        
        ctx.strokeStyle = "orange";
        ctx.lineWidth = 11.0;
        ctx.stroke();
        
        currentAngle += 0.02;
        document.getElementById("angle").innerHTML=currentAngle;
        raf(Update);
    }
    raf(Update);