var WINDOW_WIDTH=1024,

WINDOW_HEIGHT=768,

RADIUS=8;

window.onload=function(){

var canvas=document.getElementById("canvas");

canvas.width=WINDOW_WIDTH;

canvas.height=WINDOW_HEIGHT;

var context=canvas.getContext("2d");

render(context);

}

function render(ctx){

var hours=12;

var minutes=34;

var seconds=56;

renderDigi(0,0,parseInt(hours/10),ctx);

}

function renderDigi(x,y,num,ctx){

ctx.fillStyle="#00f";

for(var i=0; i<digit[num].length;i++){

for(var j=0;j<digit[num][i].length;j++){

if(digit[num][i][j]==1){

ctx.beginPath();

ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);

ctx.closePath();

ctx.fill();

}

}

}

}