JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id="clock" width="400" height="400"></canvas>

JavaScript

$(document).ready(function(){
    
    drawClockFace();
    refleshing();
});

function drawClockFace(){
    
    var clockDraw=document.getElementById('clock').getContext('2d');
    
    clockDraw.translate(200,200); //translate the coordinates(set the original point to (200, 200))
    
    drawCircle(clockDraw, 0, 0, 200, 0, Math.PI*2, true, "#333333", true, 5); //background
    drawCircle(clockDraw, 0, 0, 190, 0, Math.PI*2, true, "#FFFFFF", true, 5); //face
    drawCircle(clockDraw, 0, 0, 170, 0, Math.PI*2, true, "#EEEEEE", false, 2); //face
    
    drawScale(clockDraw, -200, 0, -160, 0, 3, 12, "#333333"); //hours' scale
    drawScale(clockDraw, -200, 0, -170, 0, 1, 60, "#333333"); //minutes and seconds' scale
};

function drawCircle(img, x, y, r, beginAngle, endAngle, direction, fillColor, fillOrNot, lW){

    img.save();
    img.beginPath();
    img.arc(x, y, r, beginAngle, endAngle, direction);
    img.closePath();
    img.lineWidth=lW;
    img.strokeStyle="DDDDDD";
    
    if (fillOrNot==true)  
    {
        img.fillStyle=fillColor;
        img.fill();
    }
    else if (fillOrNot==false)  img.stroke();
    
    img.restore();
};

function drawScale(img, x_start, y_start, x_end, y_end, lW, scaleCount, fillColor){

    img.save();
    img.lineWidth = lW;
    img.strokeStyle = fillColor;
    var i;
    var angle = Math.PI*2/scaleCount;
    
    for (i=0; i<scaleCount; i ++)
    {
        img.beginPath();
        img.moveTo(x_start, y_start);
        
        img.lineTo(x_end, y_end);
        img.stroke();    
        img.rotate(angle);
    }
    
    img.restore();
};

function refleshing(){
    
    var now = new Date();
    
    var pointerDraw=document.getElementById('clock').getContext('2d');
    
    drawCircle(pointerDraw, 0, 0, 160, 0, Math.PI*2, true, "#EEEEEE", true, 2); //clearing the clock face    

    var n_angle = Math.PI*(now.getMilliseconds()/30);
    var s_angle = Math.PI*(now.getSeconds()/30);
    var m_angle =...