JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<canvas id='can' width=500 height=500></canvas>

CSS

#can{
    border:1px solid #F00;
}

JavaScript

var ctx = document.getElementById('can').getContext('2d');

var i=0,r=10,points=3;
ctx.lineWidth=7;



function drawArrow(cx,cy,deg){
    ctx.fillStyle='#FFF'
    ctx.strokeStyle='#FFF'
    ctx.beginPath();
    for(var i=0;i<360;i++){
         var x=Math.sin(Math.PI/180*(i+deg))*r;
        var y=Math.cos(Math.PI/180*(i+deg))*r;
        
        var tx=Math.sin(Math.PI/180*x);   
        
       
            ctx.lineTo((x+cx)+tx,(y+cy)+tx);
    }
    ctx.fill();
    ctx.stroke()
    ctx.strokeStyle='#000'
        ctx.beginPath();
    for(var i=0;i<360;i++){
         var x=Math.sin(Math.PI/180*(i+deg))*r;
        var y=Math.cos(Math.PI/180*(i+deg))*r;
        
        var tx=Math.sin(Math.PI/180*x);   
        
        if(i%(360/points)==0)
            ctx.lineTo((x+cx)+tx,(y+cy)+tx);
    }
    ctx.stroke();
}
var ci=0;
function drawCircle(){
    var x=Math.sin(Math.PI/180*(ci))*100;
    var y=Math.cos(Math.PI/180*(ci))*100;
    //ctx.lineTo(x+200,y+200)
    drawArrow(x+200,y+200,ci-30);
    ctx.stroke();
    ci++;
    if(ci>360)return;
    setTimeout(drawCircle,1);
}
ctx.beginPath()
drawCircle()