Code

<canvas id="canvas" height="200" width="400" style="background: rgba(0,0,0,0.8);"></canvas>
<script type="text/javascript">
var c = new cajal('canvas',{loopFps: 10});

var thetime = function (){
    var date = new Date();
    var ret = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    ret += ':';
    ret += date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();;
    ret += ':';
    ret += date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();;
    return ret;
};

var animHour = function (f,t) {
    c.get('h').p.angle += cajal.Ease.expInOut(30,f,t,2);
    if (f===t) {
        var date = new Date();
        c.get('h').p.angle = 30 * date.getHours();
        var ap = 'AM';
        if (date.getHours() >= 12) {
            ap = 'PM';
        }
        c.get('ap').text(ap);
    }
}

var animMin = function (f,t) {
    c.get('min').p.angle += cajal.Ease.expInOut(6,f,t,2);
    if (f===t) {
        var date = new Date();
        c.get('min').p.angle = 6 * date.getMinutes();
        if (c.get('min').p.angle === 0) {
            this.animate(animHour,'2s');
        }
    }
}

var animSec = function (f,t) {
    c.get('sec').p.angle += 6/c.options.loopFps;
    if (Math.floor(c.get('sec').p.angle%360) === 0) {
        var date = new Date();
        c.get('sec').p.angle = 6 * date.getSeconds();
        this.animate(animMin,'2s');
    }
    c.get('time').text(thetime());
}

var init = function () {
    var center = {
        x: c.canvas.width/2,
        y: c.canvas.height/2
    }
    var date = new Date();

    var drawOptions = {
        width: 2,
        stroke:'rgba(255,255,255,0.7)',
        shadow: 'rgba(255,255,255,0.5)',
        shadowBlur: 3
    };

    var sec = new cajal.Segment(center.x, center.y, 29, 6 * date.getSeconds()).options(drawOptions).rotate(-90).scale(0.6,3);
    var min = new cajal.Segment(center.x, center.y, 22, 6 * date.getMinutes()).options(drawOptions).rotate(-90).scale(0.6,3);
    var h =   new cajal.Segment(center.x, center.y, 15, 30 * date.getHours()).options(drawOptions).rotate(-90).scale(0.6,3);

    var ap = 'AM';
    if (date.getHours() >= 12) {
        ap = 'PM';
    }

    var text = new cajal.Text(center.x-7, center.y+3, ap).options({
        font: 'bold 10px "Hevetica Neue", Helvetica, Arial, sans-serif',
        textAlign: 'center',
        fill: 'rgba(255,255,255,0.5)',
        shadow: 'rgba(255,255,255,0.3)',
        shadowBlur: 3
    });
    var time = new cajal.Text(center.x-50, center.y+50, thetime()).options({
        font: 'bold 25px "Hevetica Neue", Helvetica, Arial, sans-serif',
        textAlign: 'center',
        fill: 'rgba(0,0,0,0.7)',
        shadow: 'rgba(255,255,255,0.5)',
        shadowBlur: 3
    });
    c.add('sec',sec).add('min',min).add('h',h).add('ap',text).add('time',time);
}
init();
c.animate(animSec);
</script>