HTML5-CANVAS-CIRCULAR-CLOCK

A HTML5 CIRCULAR COUNTDOWN CLOCK FOR DISPLAY IN CANVAS

GETTING STARTED:

All you need is to get the 2d context of a html5 canvas element and pass it by parameter to the Clock as the other parameters, here an example:

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

Next you need to create the clock passing the parameters you want:

var clock = new Clock({ 
		context 	  : cont, 
  	type 		    : Clock.TYPE_CLOCKWISE_INCREMENT,
  	time 		    : 5,
  	showText 	  : true,
  	textColor 	: 'white',
  	bodyColor	  : '#00CAFF',
  	borderColor : 'white',
  	radius 	    : 100,
  	bodyWidth   : 10,
  	borderWidth : 10,
  	endCallBack : function(){
  		alert("COUNTDOWN FINISHED!");
  	}
});

Finally, you need to start the clock by calling the function "step()";

The list of parameteres than you can override are this :

{
  context          : cont, //The 2d context of the html5 canvas (No default value)
  type             : Clock.TYPE_CLOCKWISE_INCREMENT, //The type of the clock can be Clock.TYPE_CLOCKWISE_INCREMENT, Clock.TYPE_CLOCKWISE_DECREMENT, Clock.TYPE_COUNTERCLOCKWISE_INCREMENT, Clock.TYPE_COUNTERCLOCKWISE_DECREMENT(Default Clock.TYPE_CLOCKWISE_INCREMENT)
  time             : time, //The countdown of the clock in seconds, (Default 60)
  showText         : true, //If you want that the clock includes text showing the seconds in it's center(Default true),
  textColor        : '#00CAFF', //The color of the text(Default White),
  bodyColor        : '#00CAFF', //The color of the clock's body, ( Default #FF0000),
  borderColor      : 'red', //The color of the border of the clock, (Default transparent),
  fontFace         : 'Arial', //The font of the text (Default Arial)
  radius           : 100, //The radius of the circle (Default 200),
  bodyWidth        : 10, //The width of the body // Default 10
  borderWidth      : 10, //The width of the border
  borderSeparation : 5, //The separation between the body and the border,
  x                : 0, // x coordinate of the clock, (Default 300)
  y                : 0, // y coordinate of the clock, (Default 300)
  endCallBack      : function(){ // Function to execute when the coutdown has finished
    //Do something
  },
  autoDraw         : true, //true indicates if the clock uses a interval to drawn itself in the canvas, false indicates that you want to drawn it manually by you own logic (Default true)
  freq             : 10, //The frequency that the clock refresh it's state (In milliseconds) (Default 10)
}

EXAMPLES

--AUTOMATIC USE--

var canvas = document.getElementById("myCanvas");
var cont = canvas.getContext("2d");
var clock = new Clock({ 
		context 	  : cont, 
  	type 		    : Clock.TYPE_CLOCKWISE_INCREMENT,
  	time 		    : 5,
  	showText 	  : true,
  	textColor 	: 'white',
  	bodyColor	  : '#00CAFF',
  	borderColor : 'white',
  	radius 	    : 100,
  	bodyWidth   : 10,
  	borderWidth : 10,
  	endCallBack : function(){
  		alert("COUNTDOWN FINISHED!");
  	}
});

clock.step();

--MANUAL USE--

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

var clock = new Clock({ 
		context 	  : cont, 
  	type 		    : Clock.TYPE_CLOCKWISE_INCREMENT,
  	time 		    : 5,
  	showText 	  : true,
  	textColor 	: 'white',
  	bodyColor	  : '#00CAFF',
  	borderColor : 'white',
  	radius 	    : 100,
  	bodyWidth   : 10,
  	borderWidth : 10,
  	autodraw    : false,
  	endCallBack : function(){
  		alert("COUNTDOWN FINISHED!");
  	}
});

clock.step();

//Example with setInterval
setInterval(function(){
  clock.paint();
},10);