PenguinOfThunder/html5canvasclock.html

## html5canvasclock.html
<!DOCTYPE html>
<!-- HTML5 canvas LED clock -->
<html lang="en">
    <head>
  <title>HTML5 canvas clock</title>
<script type="text/javascript"><!--
var blink=1;
var dispDate=1;

// the bitmap font
var digits=new Array();
digits['0']=new Array(0x18,0x24,0x42,0x42,0x42,0x24,0x18,0x00);
digits['1']=new Array(0x08,0x18,0x08,0x08,0x08,0x08,0x1c,0x00);
digits['2']=new Array(0x3c,0x42,0x02,0x0c,0x30,0x40,0x7e,0x00);
digits['3']=new Array(0x3c,0x42,0x02,0x1c,0x02,0x42,0x3c,0x00);
digits['4']=new Array(0x0c,0x14,0x24,0x44,0x7e,0x04,0x04,0x00);
digits['5']=new Array(0x7e,0x40,0x40,0x7c,0x02,0x42,0x3c,0x00);
digits['6']=new Array(0x3c,0x42,0x40,0x7c,0x42,0x42,0x3c,0x00);
digits['7']=new Array(0x7e,0x02,0x04,0x08,0x08,0x08,0x08,0x00);
digits['8']=new Array(0x3c,0x42,0x42,0x3c,0x42,0x42,0x3c,0x00);
digits['9']=new Array(0x3c,0x42,0x42,0x3e,0x02,0x42,0x3c,0x00);
digits[':']=new Array(0x00,0x18,0x18,0x00,0x18,0x18,0x00,0x00);
digits[' ']=new Array(0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00);
digits['\\']=new Array(0x60,0x30,0x18,0x0C,0x06,0x03,0x01,0x00);
digits['/']=new Array(0x01,0x03,0x06,0x0C,0x18,0x30,0x60,0x00);

// Palette
var colors=new Array('#000000','#330000', '#ff0000');

var digwidth=8; // character width in units
var hibit=Math.pow(2,digwidth); // 256
var rowcnt=8; // character height in units
var refreshDelay=500; // how often to refresh

var lastChange = 0;

function updateDisplay() {
    var d=new Date();


    // flip time/date display every 10 seconds
    if(d.getTime() - lastChange > 10000) {
	dispDate = 1-dispDate;
	lastChange = d.getTime();
    }

    // blink every other frame
    blink=1-blink;

 // Fri Feb 10 2006 16:57:06 GMT-0500 (Eastern Standard Time)
 disp = '';
 var hr=zpad2(d.getHours());
 var mi=zpad2(d.getMinutes());
 var se=zpad2(d.getSeconds());

 var yr=zpad2((d.getYear()+1900)%100);
 var mo=zpad2(d.getMonth()+1);
 var dy=zpad2(d.getDate());

 if(dispDate) {
     disp = mo.substr(0,2)
     + (blink?'/':' ')
     + dy.substr(0,2)
     + (blink?'/':' ')
     + yr.substr(0,2);
 } else {
     disp = hr.substr(0,2)
     + (blink?':':' ')
     + mi.substr(0,2)
     + (blink?':':' ')
     + se.substr(0,2);
 }

 // render the display
 var c = document.getElementById('clockCanvas');

 c.width = window.innerWidth;
 c.height = window.innerHeight;

 var c2d = c.getContext('2d');

 var width=c.width;
 var height=c.height;

 // exact fit, prone to rounding errors
  var pixelWidth=(width/(disp.length * digwidth ));
  var pixelHeight=(height/rowcnt);
 // not exact fit, integer math
 //var pixelWidth=Math.floor(width/(disp.length * digwidth ));
 //var pixelHeight=Math.floor(height/rowcnt);

 // clear with background color
 c2d.fillStyle = colors[0];
 c2d.fillRect(0, 0, width, height);

 // for each character
 for(var i = 0; i < disp.length; i++ ) {
     var ch = disp.substr(i, 1);
     // If we have a bitmap for that character
     if( digits[ch] ) {
	 // find left offset for character position
	 var offset = digwidth * i;
	 // for each row in character
	 for(var row = 0; row < rowcnt; row++) {
	     var y = row * pixelHeight; // upper-left pixel y coord
	     var val = digits[ch][row];	// bitmask in character's bitmap
	     // for each bit in bitmask
	     for(var n = 1; n <= digwidth; n++) {
		var x = pixelWidth * (offset + n - 1);
		var color = (val & (hibit>>n)) ? 2 : 1 ; // color index
		c2d.fillStyle = colors[color];
		// leave 1 pixel blank for grid effect
		c2d.fillRect(x, y, pixelWidth-1, pixelHeight-1);
	     }
	 }
     }
 }

 // reschedule
 setTimeout("updateDisplay()",refreshDelay);
}

function zpad2(num) {
 return (num<10)?'0'+num:''+num;
}
</script>
<style type="text/css">
html, body { background-color: #000000; color: #ff0000; border: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; }
#clockCanvas { width: 100%; height: 100%; }
</style>
</head>
<body onLoad="updateDisplay()">
    <!-- this works best with height and width divisable by 8 -->
    <canvas id="clockCanvas" height="640" width="3200">Your browser does not support canvas</canvas>
</body>
</html>
	<!DOCTYPE html>
	<!-- HTML5 canvas LED clock -->
	<html lang="en">
	<head>
	<title>HTML5 canvas clock</title>
	<script type="text/javascript"><!--
	var blink=1;
	var dispDate=1;

	// the bitmap font
	var digits=new Array();
	digits['0']=new Array(0x18,0x24,0x42,0x42,0x42,0x24,0x18,0x00);
	digits['1']=new Array(0x08,0x18,0x08,0x08,0x08,0x08,0x1c,0x00);
	digits['2']=new Array(0x3c,0x42,0x02,0x0c,0x30,0x40,0x7e,0x00);
	digits['3']=new Array(0x3c,0x42,0x02,0x1c,0x02,0x42,0x3c,0x00);
	digits['4']=new Array(0x0c,0x14,0x24,0x44,0x7e,0x04,0x04,0x00);
	digits['5']=new Array(0x7e,0x40,0x40,0x7c,0x02,0x42,0x3c,0x00);
	digits['6']=new Array(0x3c,0x42,0x40,0x7c,0x42,0x42,0x3c,0x00);
	digits['7']=new Array(0x7e,0x02,0x04,0x08,0x08,0x08,0x08,0x00);
	digits['8']=new Array(0x3c,0x42,0x42,0x3c,0x42,0x42,0x3c,0x00);
	digits['9']=new Array(0x3c,0x42,0x42,0x3e,0x02,0x42,0x3c,0x00);
	digits[':']=new Array(0x00,0x18,0x18,0x00,0x18,0x18,0x00,0x00);
	digits[' ']=new Array(0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00);
	digits['\\']=new Array(0x60,0x30,0x18,0x0C,0x06,0x03,0x01,0x00);
	digits['/']=new Array(0x01,0x03,0x06,0x0C,0x18,0x30,0x60,0x00);

	// Palette
	var colors=new Array('#000000','#330000', '#ff0000');

	var digwidth=8; // character width in units
	var hibit=Math.pow(2,digwidth); // 256
	var rowcnt=8; // character height in units
	var refreshDelay=500; // how often to refresh

	var lastChange = 0;

	function updateDisplay() {
	var d=new Date();


	// flip time/date display every 10 seconds
	if(d.getTime() - lastChange > 10000) {
	dispDate = 1-dispDate;
	lastChange = d.getTime();
	}

	// blink every other frame
	blink=1-blink;

	// Fri Feb 10 2006 16:57:06 GMT-0500 (Eastern Standard Time)
	disp = '';
	var hr=zpad2(d.getHours());
	var mi=zpad2(d.getMinutes());
	var se=zpad2(d.getSeconds());

	var yr=zpad2((d.getYear()+1900)%100);
	var mo=zpad2(d.getMonth()+1);
	var dy=zpad2(d.getDate());

	if(dispDate) {
	disp = mo.substr(0,2)
	+ (blink?'/':' ')
	+ dy.substr(0,2)
	+ (blink?'/':' ')
	+ yr.substr(0,2);
	} else {
	disp = hr.substr(0,2)
	+ (blink?':':' ')
	+ mi.substr(0,2)
	+ (blink?':':' ')
	+ se.substr(0,2);
	}

	// render the display
	var c = document.getElementById('clockCanvas');

	c.width = window.innerWidth;
	c.height = window.innerHeight;

	var c2d = c.getContext('2d');

	var width=c.width;
	var height=c.height;

	// exact fit, prone to rounding errors
	var pixelWidth=(width/(disp.length * digwidth ));
	var pixelHeight=(height/rowcnt);
	// not exact fit, integer math
	//var pixelWidth=Math.floor(width/(disp.length * digwidth ));
	//var pixelHeight=Math.floor(height/rowcnt);

	// clear with background color
	c2d.fillStyle = colors[0];
	c2d.fillRect(0, 0, width, height);

	// for each character
	for(var i = 0; i < disp.length; i++ ) {
	var ch = disp.substr(i, 1);
	// If we have a bitmap for that character
	if( digits[ch] ) {
	// find left offset for character position
	var offset = digwidth * i;
	// for each row in character
	for(var row = 0; row < rowcnt; row++) {
	var y = row * pixelHeight; // upper-left pixel y coord
	var val = digits[ch][row]; // bitmask in character's bitmap
	// for each bit in bitmask
	for(var n = 1; n <= digwidth; n++) {
	var x = pixelWidth * (offset + n - 1);
	var color = (val & (hibit>>n)) ? 2 : 1 ; // color index
	c2d.fillStyle = colors[color];
	// leave 1 pixel blank for grid effect
	c2d.fillRect(x, y, pixelWidth-1, pixelHeight-1);
	}
	}
	}
	}

	// reschedule
	setTimeout("updateDisplay()",refreshDelay);
	}

	function zpad2(num) {
	return (num<10)?'0'+num:''+num;
	}
	</script>
	<style type="text/css">
	html, body { background-color: #000000; color: #ff0000; border: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; }
	#clockCanvas { width: 100%; height: 100%; }
	</style>
	</head>
	<body onLoad="updateDisplay()">
	<!-- this works best with height and width divisable by 8 -->
	<canvas id="clockCanvas" height="640" width="3200">Your browser does not support canvas</canvas>
	</body>
	</html>