Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • A Concentric Circle Clock Using JavaScript and Canvas

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.36k
    Comment on it

    Hello readers, today in my blog I will discuss about canvas . Using canvas I have created a Concentric circle clock.


    The HTML <canvas> element is used to draw graphics on a web page using JavaScript.


    It basically used to create text, images , graphs , rectangles , lines , gradients and various other effects dynamically.


    Its element is defined in the HTML code by using the height and width attributes on a web page.


    Features :-


    • It is fully interactive and respond to the user action.
    • Every object that is drawn on the canvas can be easily animated.
    • Using this we can create everything which we want.
    • The HTML5 Canvas is supported by all the major browsers.
    • With the help of canvas we can create no. of applications such as gaming, advertising , data representation etc.


    In the canvas code , we creates an id attribute which will be useful in JavaScript.


    In the line of code we will create a variable that will help in caching our created canvas elements with the help of ID for accessing all the functions and properties used in canvas for drawing.


    In my blog I have created a concentric clock where I have used various functions , style , properties and paths that are used in drawing .


    Below is the list of various properties and function that are used in drawing shapes and innovating them , these are as follows :-

    1. fillStyle :- This property helps in filling color, gradient or the pattern that are used in drawing.
    2. StrokeStyle :- This property basically helps for setting the color, gradient or pattern to the stroke.
    3. AddColorStop :-It basically specifies the colors and stop the positions in a gradient object .
    4. ShadowBlur :- This property helps in setting the blur level for shadows.
    5. ShadowColor :-This property helps in setting the color that is to be used in shadow.
    6. LineCap:- This property helps in styling the end caps of the line.
    7. LineWidth :- This property helps in setting the current line width.
    8. BeginPath( ) :-It helps in setting the current path.
    9. Arc( ) :- It is used for creating the circle or part of circle.
    10. FillRect( ):- It helps to draw a filled rectangle.


    Below is the HTML code of the above example :-

    <!DOCTYPE html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Concentric Circle Clock</title>
    <canvas id='canvas' width='500' height='500'></canvas>
    <img id='myImage' />
    <script src="js/javascript.js"></script>

    In the JavaScript code , firstly I have set various canvas properties as per the requirement these were as follows :-

    strokeStyle , lineWidth, lineCap, shadowBlur and shadowColor .


    Then I created a function named degree to Radian , with a variable name as factor and assigned a value to it such that the function on return gives a product of var factor and degree as argument. I created this function for getting number of radians.


    Next I created an another function and named it as render Time( ) for calculating the date, time in hours, minutes, second and millisecond.

    Now for setting the background color I have used gradient property for filling the rectangle .


    As in the example there are 3 concentric circles representing the hours, minutes and seconds corresponding to the 3 strokes creating an arc.


    With the help of date and time picker function , I have displayed the time and date and adjusted the font-style and color.


    Below is the JavaScript code for the above example :-

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#28d1fa';
    ctx.lineWidth = 17;
    ctx.lineCap = 'round';
    ctx.shadowBlur = 15;
    ctx.shadowColor = '#28d1fa';
    function degToRad(degree) {
    var factor = Math.PI/180;
    // returns number of radians
    return degree * factor;
    function renderTime() {
    //get actual time using date object
    var now = new Date();
    var today = now.toDateString();
    var time = now.toLocaleTimeString();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    var milliseconds = now.getMilliseconds();
    // this variable added to keep seconds from jumping and smoothly going around
    var newSeconds = seconds+(milliseconds/1000);
    // Background
    gradient = ctx.createRadialGradient(250,250,5,250,250,300);
    ctx.fillStyle = gradient;
    //ctx.fillStyle = '#333';
    // Hours
    ctx.arc(250,250,200, degToRad(270), degToRad((hours*15)-90));
    // Minutes
    ctx.arc(250,250,170, degToRad(270), degToRad((minutes*6)-90));
    // Seconds
    ctx.arc(250,250,140, degToRad(270), degToRad((newSeconds*6)-90));
    // Date
    ctx.font = '25px Arial';
    ctx.fillStyle = '#28d1fa';
    ctx.fillText(today, 175, 250);
    // Time
    ctx.font = '15px Arial';
    ctx.fillStyle = '#28d1fa';
    ctx.fillText(time, 175, 275);
    var dataUrl = canvas.toDataURL;
    document.getElementById('myImage').src = dataURL;
    setInterval(renderTime, 40);

    Conclusion :-

    Hence, I have created a concentric circle clock using JavaScript and Canvas.


    Note:- The above example will run on all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: