var window_width = 1024;
var window_height = 768;
var radius = 8;
var margin_top = 60;
var margin_left = 30;

const endTime = new Date(2017, 3, 26 ,13,12,12);
var curShowTimeSeconds = 0;

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

canvas.width = window_width;
canvas.height = window_height;

curShowTimeSeconds = getCurrentShowTimeSeconds();

setInterval(
?? ?function(){
?? ??? ??? ?render( context );
?? ??? ??? ?update();
?? ??? ?},50
);


function getCurrentShowTimeSeconds() {
?? ??? ?var curTime = new Date();
?? ??? ?var ret = endTime.getTime() - curTime.getTime();
?? ??? ?ret = Math.round(ret/1000 );
?? ??? ?
?? ??? ?return ret >= 0 ? ret: 0 ;
?? ?};
?? ?
function update(){
?? ?
?? ??? ?var nextShowTimeSeconds = getCurrentShowTimeSeconds();
?? ??? ?
?? ??? ?var nextHours = parseInt( nextShowTimeSeconds /3600);
?? ??? ?var nextMinutes =? parseInt( (nextShowTimeSeconds - nextHours *3600)/60);
?? ??? ?var nextSeconds = nextShowTimeSeconds %60;
?? ??? ?
?? ??? ?var curHours = parseInt( curShowTimeSeconds /3600);
?? ??? ?var curMinutes =? parseInt( (curShowTimeSeconds - curHours *3600)/60);
?? ??? ?var curSeconds = curShowTimeSeconds %60;
?? ??? ?
?? ??? ?if( nextSeconds != curSeconds){
?? ??? ??? ??? ?
?? ??? ??? ??? ?curShowTimeSeconds = nextShowTimeSeconds;
?? ??? ??? ?};
?? ?};
?? ?
function render( context ) {
?? ??? ?context.beginPath();
?? ??? ?context.clearRect(0,0,window_width, window_height);

?? ??? ?var hours = parseInt( curShowTimeSeconds /3600);
?? ??? ?var minutes =? parseInt( (curShowTimeSeconds - hours *3600)/60);
?? ??? ?var seconds = curShowTimeSeconds %60;
?? ??? ?
?? ??? ?renderDigit( margin_left, margin_top, parseInt(hours/10), context );
?? ??? ?renderDigit( margin_left = 19*(radius+1) , margin_top , parseInt(hours%10) , context);
?? ??? ?renderDigit( margin_left = 34*(radius+1) , margin_top, 10 ,context);
?? ??? ?
?? ??? ?renderDigit( margin_left = 43*(radius+1) , margin_top , parseInt(minutes/10) , context);
?? ??? ?renderDigit( margin_left = 58*(radius+1) , margin_top , parseInt(minutes%10) , context);
?? ??? ?renderDigit( margin_left = 73*(radius+1) , margin_top, 10 ,context);
?? ??? ?
?? ??? ?renderDigit( margin_left = 82*(radius+1) , margin_top , parseInt(seconds/10) , context);
?? ??? ?renderDigit( margin_left = 97*(radius+1) , margin_top , parseInt(seconds%10) , context);
?? ?
?? ?
?? ?
?? ?};
?? ?
function renderDigit ( x, y, num, context ){
?? ?
?? ?
?? ??? ?
?? ??? ?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){
?? ??? ??? ??? ??? ??? ??? ??? ?context.beginPath();
?? ??? ??? ??? ??? ??? ??? ??? ?context.arc( x+j*2*(radius+1)+(radius+1) , y+i*2*(radius+1)+(radius+1) , radius, 0, 2*Math.PI);
?? ??? ??? ??? ??? ??? ??? ??? ?context.closePath();
?? ??? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ??? ?context.fillStyle = "pink";
?? ??? ??? ??? ??? ??? ??? ??? ?context.fill();
?? ??? ??? ??? ??? ??? ??? ?};
?? ??? ??? ??? ??? ?};
?? ??? ??? ?};
?? ?};