Circular Countdown Clocks

round, circular countdown clocks, canvas

by stofke

HTML

<script src="http://countdownjs.org/countdown.min.js"></script>
<div id="container">
    <canvas class="countdown" id="days" width="200" height="200"></canvas>
    <canvas class="countdown" id="hours" width="200" height="200"></canvas>
    <canvas class="countdown" id="minutes" width="200" height="200"></canvas>
    <canvas class="countdown" id="seconds" width="200" height="200"></canvas>
</div>

CSS

body {
    background: #ededed;
    font-family:'Open Sans', sans-serif;
}
#container {
    position: relative;
}
canvas.countdown {
    margin:10px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    font-family:'Open Sans', sans-serif;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAclBMVEUAAAD///8AAAAAAAAAAAAAAAAYGBgAAAAgICAdHR0cHBwLCwsAAAAREREaGhpAQEAICAgUFBQQEBBgYGD///+AgIAVFRUJCQnGxsYgICCOjo4RGhFxcXFQUFBwcHA5OTkKCgogICAoKCgUCgoVIBUQEBDocwHyAAAAJnRSTlMJACAEGBogHhgaCRgQHh4QIBogEAkQGB4JEAkeCRAQCRogIBoYEBVFgxUAAAEoSURBVBgZBcEHglNRDAQwje33S0i2E3qH+18RySfFEQdbUskwyaDkYOKQSSapmMSHeJCKLRkmeaKkpM/Y2Ji3z5uUTGxvsrOieOF4/6M4khF7bDKxURSTTHrXKVaUbxPFnTsPKIrFUBzfL7e2e1R6UcnE7zj4wrPLjrMVJxUlt3boaf2hs2SxknIZlp5HVvLwNetVRSU7d+6cOmf34kmGI5l25x1ZbaM4k19M/Gyr207pelRSyRl793Qv6ZL1qijqonw8krP1SSWLikq2ZGQPq183iopiS7bHFEWvWDKxvU/xcknxgooH9mSSmwwVZz7aWTKyM9zikE1KeuQ5WfpZFjtPFD3p1dbFtGu7UVJhdS/e6eme7j+dv1IcYrXp/nfta1/n2oud8h/30gjk6alZDQAAAABJRU5ErkJggg==) repeat;
    background-color:#faa61a;
}

JavaScript

//date
var day = 1;
var month = 5;
var year = 2013;

//color
var color = '#a72244';


//No changes below here
var timerId = countdown(
//set the date here
new Date(year, month - 1, day),

function (ts) {
    time = [ts.days, ts.hours, ts.minutes, ts.seconds, ts.milliseconds];
    return time;
},
countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS);

// requestAnim shim layer by Paul Irish
window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( /* function */ callback, /* DOMElement */ element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

// Grab the canvas and it's context
var canvasdays = window.document.getElementById("days"),
    contextdays = canvasdays.getContext("2d");
var canvashours = window.document.getElementById("hours"),
    contexthours = canvashours.getContext("2d");
var canvasminutes = window.document.getElementById("minutes"),
    contextminutes = canvasminutes.getContext("2d");
var canvasseconds = window.document.getElementById("seconds"),
    contextseconds = canvasseconds.getContext("2d");

//Set some variables
var wh = canvasdays.clientWidth;
var rd = wh / 2;
var fps = 6;

// Clear the canvas
function clearCanvas(ctx) {
    // Store the current transformation matrix
    ctx.save();
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, wh, wh);
    // Restore the transform
    ctx.restore();
}

// Draw a ring with a specified radius, width, and fill
function drawRing(ctx, x, y, outsideRadius, ringWidth, percentFilled, rotationAngle, color) {
    ctx.beginPath();
    ctx.arc(x, y, outsideRadius - ringWidth / 2, rotationAngle, (rotationAngle - 2 * Math.PI) + 2 * Math.PI * percentFilled, true);
    ctx.lineWidth = ringWidth;
    ctx.strokeStyle = color;
   ...