HTML5 Canvas Timed Image Gallery

A simple use of the HTML Canvas Element to create a simple pie-chart timer to show when the next image in a gallery slide show will be displayed.

I will write more about how it works, when I get a free moment.

Yes, global variables are crap and shouldn't be used. But it was a quick 30 minute test

JavaScript

 
	var timeAngle = 0;
	var canvas;
	var ctx;
	var t;
	var timerColor = 'rgba( 204, 204, 204, 1 )';
	var c = 0;
	var pause = 8000;
 
	function setup(){
		canvas = document.getElementById('tutorial');
		if (canvas.getContext){
			ctx = canvas.getContext('2d');
			t = setInterval( 'updateTime()', pause/60 );
		}
	}
 
	function updateTime(){
		if(c<60){
			c = c + 1;
			currentMillisec = 0;
			drawSeconds();
		} else {
			clearTimeout(t);
			move();
		}
	}
 
	function drawSeconds(){
		timeAngle = 0.006 * ( c * 1000  );
		ctx.fillStyle = timerColor;
		ctx.beginPath();
		ctx.moveTo( 12, 20 );
		ctx.lineTo( 12, 5 );
		ctx.arc( 12, 12, 10, calcDeg( 0 ), calcDeg( timeAngle ), false );
		ctx.lineTo( 12, 12 );
		ctx.fill();
	} 
 
	function calcDeg( deg ){
		return (Math.PI/180) * (deg - 90);
	}
 
	function move(){
		ctx.clearRect ( 0 , 0 , 25 , 25 );
		$('#scroll').animate({top:'-=100px'},
							 function(){
								$(this).find('div:first').appendTo($(this));
								$(this).css({top:'0px'});
								c = 0;
								t = setInterval( 'updateTime()', pause/60 );
							 });
	}
	$(function(){
		   setup();
		   $('#james').hover(function(){
				ctx.clearRect ( 0 , 0 , 25 , 25 );
				clearTimeout(t);
		   },
		   function(){
				c = 0;
				t = setInterval( 'updateTime()', pause/60 );
		   })
	});
 

Demo