Canvas Clock | Current Time

Displays a clock in digital and analog. The analog clock is displayed using canvas.

by Jacques Vincilione

HTML

<div class="container">
    <header>
         <h1>Tick tock.</h1>

    </header>
    <div class="rowElem">
        <button class="myBtn" onclick="analogTime()">Show Clock</button>
    </div>
</div>
<div class="container" id="result">
    <h2 id="canvas-head">Digital</h2>
    <div id="digital"></div>
    <h2 id="canvas-head">Analog</h2>
    <canvas id="analog" width="310" height="310">Sorry, your browser does not support the most awesome HTML5 element, canvas. Have you considered <a href="http://google.com/chrome">updating</a>?</canvas>
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400, 700, 600');

html, body {
    font-family:"Open Sans", san-serif;
    color:#232323;
    background:#369;
}
.container {
    width:90%;
    max-width:960px;
    padding:30px;
    background:#eee;
    margin:10px auto 0;
}
div{
    margin:10px;
}
#result{
    display:none;
}
h1, h2 {
    font-weight:700;
    color:#369;
    margin-top:0;
    width:95%;
    border-bottom:1px solid #cdcdcd;
}
h1{
    font-size:2.2em;
}
.rowElem {
    width:100%;
    line-height:30px;
}
.rowElem label, .formRight {
    float:left;
}
.myBtn {
    padding:10px 15px;
    background:#3276b1;
    color:#fff;
    border:none;
}
.myBtn:hover {
    background:#2d6a9f;
}

JavaScript

function drawClock(){
    var d = new Date();
    var hours = d.getHours() % 12;
    var min = d.getMinutes();
    var seconds = d.getSeconds();
    var minutes = min + hours*60;
    var angle = minutes/2;
    var minangle = min*6;
    var secangle = seconds*6;
        
    //set canvas variables
    var canvas = document.getElementById('analog'),
        ctx = canvas.getContext('2d');
    
        canvas.width = canvas.width;
    
    //draw circle for clock outline    
    ctx.beginPath();
    ctx.arc(155, 155, 150, 0, 2 * Math.PI);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    ctx.translate(0, 0);
    ctx.rotate(0);
    ctx.save();
    ctx.save();
    ctx.save();
    
    //draw and rotate hours arm
    ctx.translate(155, 155);
    ctx.rotate(angle*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -100);
    ctx.lineTo(0, 20);
    ctx.lineWidth = 3;
    ctx.stroke();
    
    //draw and rotate seconds arm
    ctx.restore();
    ctx.translate(155,155);
    ctx.rotate(secangle*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -130);
    ctx.lineTo(0, 20);
    ctx.lineWidth = 1;
    ctx.stroke();
    
    //draw and rotate minutes arm
    ctx.restore();
    ctx.translate(155,155);
    ctx.rotate(minangle*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -130);
    ctx.lineTo(0, 20);
    ctx.lineWidth = 2;
    ctx.stroke();
    
    //add numbers to clock   
    ctx.restore();
    ctx.translate(155,155)
    ctx.font = "30px Arial";
    ctx.fillText("12",-20,-120);
    ctx.fillText("3", 125, 12);
    ctx.fillText("6", -8, 140);
    ctx.fillText("9", -140, 12);
    
    //display digital clock above analog clock
    //check if hours = 0 to return 12
    if(hours == 0){
        hours = 12;
    }
    if(min < 10){//if min less than 10 add a zero in front of min.
        min = '0' + min;
    }
    if(seconds < 10){//if min less than 10 add a zero in front of min.
      ...