clock for system time

Clock done displaying system time

by rao b

HTML

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

JavaScript

var c = document.getElementById("myCanvas");
            var ctxline = c.getContext("2d");
            //variables
            var seconds = 0,minutes = 0 , hours = 0;
            var iSeconds = 0, counterSeconds = 0, xSeconds=180,ySeconds=0;
            var increaseSeconds = 6 * Math.PI /180;
            var iMinutes = 0, counterMinutes = 0, xMinutes=180,yMinutes=0;
            var increaseMinutes = 6 * Math.PI /180;
            var iHours = 0, counterHours = 0, xHours=180,yHours=0;
            var increaseHours = 6 * Math.PI /180;
            //ctxline.clearRect(0, 0, c.width, c.height);
            
            //drawLinesInCircle();
            clockDesign();
            getAndSetCurrentTime();
            clock();
            function clockDesign(){
                var iClockHours = 0, counterClockHours = 0, xClockHours=180,yClockHours=0;
                var increaseClockHours = 30 * Math.PI /180;
                var hours = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
                var gradient=ctxline.createLinearGradient(0,0,c.width,0);
                jQuery.each( hours, function( i, val ) {                 
                    xClockHours = 180 + Math.sin(counterClockHours)* 140;
                    yClockHours =  180 - Math.cos(counterClockHours)* 140;
                    counterClockHours += increaseClockHours; 
                    //alert(counterClockHours);
                    // Create gradient
                    ctxline.font="30px Verdana";
                    ctxline.textAlign = 'center';
                    gradient.addColorStop("0.5","red");
                    
                    
                    ctxline.fillStyle=gradient;
                    ctxline.fillText(val,xClockHours,yClockHours);
                    
                });
            }
            
            function getAndSetCurrentTime(){
                var dt = new Date();
                var time = dt.getHours() + ":" + dt.getMinutes() + ":" +...