HTML5 and jQuery

Start Position: Finish Position:

Large circle diameter: Large circle stroke:

Small circle diameter: Small circle stroke:

Rotating Dial

This is a dial I have built using the HTML5 canvas tag alongside a bit of jQuery.

It has no specific purpose, although could potentially be used for a number of things.

The starting and finishing point of the dial can be altered from between 20 and 350 degrees; the size of the dial can also be changed (a current maximum of 500px) and the output results in an integer being given between 0 and 100.

In this example the output has been trebled and added to the height of a div tag.

I'm currently in the process of porting this functionality into a jQuery plugin.