window.onload = function () {
	var draw = document.getElementById('draw'),
		ctx,
		xClock,
		yClock,
		rClock;

	ctx = getCtx(draw);
	if (ctx === null) return;

	setSize(draw);

	xClock = draw.width / 2;
	yClock = draw.height / 2;
	rClock = xClock < yClock ? 0.7 * xClock : 0.7 * yClock;

	drawClock(ctx, xClock, yClock, rClock);

	setInterval(function () {
		ctx.clearRect(0, 0, draw.width, draw.height);
		drawClock(ctx, xClock, yClock, rClock);
	}, 1000);

}

function getCtx (canvas) {
	if (!canvas.getContext) {
		console.error('Your browser does not support the HTML5 <canvas>.');
		return null;
	}

	return canvas.getContext('2d');
}

function setSize (canvas) {
	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;
}

function drawClock (ctx, x, y, r) {
	var numbersAngle = 2 * Math.PI / 12,
		hourAngle = numbersAngle,
		minAngle = 2 * Math.PI / 60,
		date = new Date();

	ctx.beginPath();
	// draw outer circle
	ctx.arc(x, y, r, 0, 2 * Math.PI, false);

	// draw inner circle
	ctx.moveTo(x + r - 5, y);
	ctx.arc(x, y, r - 5, 0, 2 * Math.PI, false);

	ctx.save();

	// translate to center
	ctx.translate(x, y);

	// draw seconds hand
	ctx.save();
	ctx.rotate(minAngle * date.getSeconds());
	ctx.moveTo(0, 0);
	ctx.lineTo(0, - r + 15);
	ctx.restore();

	// draw minute hand
	ctx.save();
	ctx.rotate(minAngle * date.getMinutes());
	ctx.moveTo(0, 0);
	ctx.lineTo(0, - r + 15);
	ctx.restore();

	// draw hour hand
	ctx.save();
	ctx.rotate(hourAngle * date.getHours());
	ctx.moveTo(0, 0);
	ctx.lineTo(0, - r + 65);
	ctx.restore();

	// stroke the path
	ctx.stroke();

	// draw numbers
	ctx.font = 'bold 14px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';

	ctx.save();
	ctx.rotate(numbersAngle);
	for (i = 1; i <= 12; i++) {
		ctx.fillText(i, 0, - r + 20);
		ctx.rotate(numbersAngle);
	}
	ctx.restore();

	ctx.restore();
}

window.onload = function () {
	var draw = document.getElementById('draw'),
		ctx,
		xClock,
		yClock,
		rClock;

	ctx = getCtx(draw);
	if (ctx === null) return;

	setSize(draw);

	xClock = draw.width / 2;
	yClock = draw.height / 2;
	rClock = xClock < yClock ? 0.7 * xClock : 0.7 * yClock;

	drawClock(ctx, xClock, yClock, rClock);

	setInterval(function () {
		ctx.clearRect(0, 0, draw.width, draw.height);
		drawClock(ctx, xClock, yClock, rClock);
	}, 1000);

}

function getCtx (canvas) {
	if (!canvas.getContext) {
		console.error('Your browser does not support the HTML5 <canvas>.');
		return null;
	}

	return canvas.getContext('2d');
}

function setSize (canvas) {
	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;
}

function drawClock (ctx, x, y, r) {
	var numbersAngle = 2 * Math.PI / 12,
		hourAngle = numbersAngle,
		minAngle = 2 * Math.PI / 60,
		date = new Date();

	ctx.beginPath();
	// draw outer circle
	ctx.arc(x, y, r, 0, 2 * Math.PI, false);

	ctx.save();

	// translate to center
	ctx.translate(x, y);

	// draw seconds hand
	ctx.save();
	ctx.rotate(minAngle * date.getSeconds());
	ctx.moveTo(0, 20);
	ctx.lineTo(0, - r + 30);
	ctx.restore();

	// draw minute hand
	ctx.save();
	ctx.rotate(minAngle * date.getMinutes());
	ctx.moveTo(0, 20);
	ctx.lineTo(0, - r + 30);
	ctx.restore();

	// draw hour hand
	ctx.save();
	ctx.rotate(hourAngle * date.getHours());
	ctx.moveTo(0, 20);
	ctx.lineTo(0, - r + 100);
	ctx.restore();

	// stroke the path
	ctx.lineWidth = 5;
	ctx.stroke();

	// draw numbers
	ctx.font = 'bold 14px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';

	ctx.save();
	ctx.rotate(numbersAngle);
	for (i = 1; i <= 12; i++) {
		ctx.fillText(i, 0, - r + 20);
		ctx.rotate(numbersAngle);
	}
	ctx.restore();

	ctx.restore();
}

Add style