var Clock = function(options){
var SECOND_MINUTE_MOVEMENT = 0.1;
var STARTING_OFFSET = 15;
displayClockOutline: true,
displayMinuteDashes: true,
smallPoint: this.radius / 50,
var settings = $.extend({}, defaults, options);
var canvas = document.getElementById(settings.element);
var ctx = canvas.getContext('2d');
if (settings.timezoneOffset)
return calcTime(settings.timezoneOffset);
function circle(length, color, fillColor) {
length = length || settings.radius;
ctx.strokeStyle = color || settings.colors.clockColor;
ctx.arc(canvas.width / 2, canvas.height / 2, length, 0, Math.PI * 2);
ctx.fillStyle = fillColor || settings.colors.backgroundColor;
ctx.fillStyle = settings.colors.numbersColor;
ctx.font = "bold 16px Arial";
var w = canvas.width / 2;
var h = canvas.height / 2;
y: w - settings.radius + 24,
x: h + settings.radius - 20,
y: w + settings.radius - 13,
x: h - settings.radius + 10,
ctx.fillText(numbers[obj].text, numbers[obj].x, numbers[obj].y);
var seconds = getDate().getSeconds();
angle = (((seconds + STARTING_OFFSET) * Math.PI / 3) * SECOND_MINUTE_MOVEMENT);
lineSegment(angle, settings.secondHand.length, settings.secondHand.width, settings.secondHand.color)
var minute = getDate().getMinutes();
angle = (((minute + STARTING_OFFSET) * Math.PI / 3) * SECOND_MINUTE_MOVEMENT);
lineSegment(angle, settings.minuteHand.length, settings.minuteHand.width, settings.minuteHand.color);
var hour = (date.getHours() > 12) ? date.getHours() - 12 : date.getHours();
angle = (((hour + STARTING_OFFSET) * Math.PI / 3) * getHourMovement(date.getMinutes()));
lineSegment( angle, settings.hourHand.length, settings.hourHand.width, settings.hourHand.color );
function getHourMovement(minute){
if (minute >= 15 && minute < 30)
else if (minute >= 30 && minute < 45)
function lineSegment( angle, len, width, color ) {
var x1 = Math.cos(angle) * (settings.radius - (len || 0));
var y1 = Math.sin(angle) * (settings.radius - (len || 0));
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo(canvas.width / 2 - x1, canvas.height / 2 - y1);
for (var i = 0; i < 60; i++){
var angle = (((i + STARTING_OFFSET) * Math.PI / 3) * SECOND_MINUTE_MOVEMENT);
var width = (i % 5) ? 1 : 4;
lineSegment(angle, 0, width, settings.colors.dashColor );
function dashWidth(length){
circle(settings.radius - length, settings.colors.backgroundColor, settings.colors.backgroundColor);
circle(settings.smallPoint, setttins.colors.vertexColor, settings.colors.vertexColor);
function calcTime(offset) {
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
newDateWithOffset = new Date(utc + (3600000*offset));
return newDateWithOffset;
if (settings.displayClockOutline)
if (settings.displayMinuteDashes)
if (settings.minuteHand.display)
if (settings.secondHand.display)
if (settings.hourHand.display)
if (settings.displayNumbers)
ctx.clearRect(0, 0, canvas.width, canvas.height);
fns.forEach(function(fn) {
displayMinuteDashes: true