var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;

window.onload = function() {
	var c = document.getElementById("canvas");
	var ctx = c.getContext('2d');
	ctx.width = WINDOW_WIDTH;
	ctx.height = WINDOW_HEIGHT;
	render(ctx);

	function render(ctx) {
		var hours = 12;
		var minutes = 34;
		var seconds = 56;

		renderDigit(0, 0, parseInt(hours / 10), ctx);
	}

	function renderDigit(x, y, num, ctx) {
		ctx.fillStyle = "red";
		for (var i = 0; i < digit[num].length; i++) {
			for (var j = 0; j < digit[num][i]; j++) {
				if (digit[num][i][j] == 1) {
					ctx.beginPath();
					ctx.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + (i + 1) * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
					ctx.closePath();
					ctx.fill();
				}
			}
		}
	}
}