DialClock.js

var dialClock = function(rotate) {
		var dial = document.getElementById('dial-clock'),
		    ctx = dial.getContext('2d'),
		    angle,
		    secHandLength = 360,
		    bigDegNum = (isInt(rotate) || isFloat(rotate))?rotate:3,
		    smallDegNum = (isInt(rotate) || isFloat(rotate))?rotate * 5:15;

		ctx.clearRect(0, 0, dial.width, dial.height);

		for (var i = 0; i < 12; i++) {
			angle = (i - bigDegNum) * (Math.PI * 2) / 12;
			ctx.lineWidth = 1;
			ctx.beginPath();
			var x1 = (dial.width / 2) + Math.cos(angle) * (secHandLength),
			    y1 = (dial.height / 2) + Math.sin(angle) * (secHandLength),
			    x2 = (dial.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 7)),
			    y2 = (dial.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 7)),
			    x3 = (dial.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 4)),
			    y3 = (dial.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 4));

			ctx.moveTo(x1, y1);
			ctx.lineTo(x2, y2);
			ctx.strokeStyle = '#000';
			ctx.stroke();
			ctx.font = "25px Arial";
			ctx.fillText(i, x3, y3);
		}

		for (var i = 0; i < 60; i++) {
			angle = (i - smallDegNum) * (Math.PI * 2) / 60;
			ctx.lineWidth = 1;
			ctx.beginPath();
			var x1 = (dial.width / 2) + Math.cos(angle) * (secHandLength),
			    y1 = (dial.height / 2) + Math.sin(angle) * (secHandLength),
			    x2 = (dial.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30)),
			    y2 = (dial.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30)),
			    x3 = (dial.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 20)),
			    y3 = (dial.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 20));

			ctx.moveTo(x1, y1);
			ctx.lineTo(x2, y2);
			ctx.strokeStyle = '#000';
			ctx.stroke();
			ctx.font = "10px Arial";
			ctx.fillText(i, x3, y3);
		}

};