Welcome

This site contains some HTML5 Canvas projects I created and decided to share with the world in the hope that others may find them useful. See below for the projects which are available and please feel welcome to download the source code, which is fully commented, to use in your own projects.


Projects

Click the project image to see a working example.


Winning Wheel


HTML5 Canvas Winning Wheel
Current version: 1.2
(14 Jul 2013)

Description:
In this project I use HTML5 Canvas and Javascript to create a spinning prize wheel. The user can select the power then click spin. The wheel spins then slows over time to a stop indicating the prize.


Originally created for my work social club, this project has been updated to include additional features and fully commented code.


Features include:

  • Wheel rotated using HTML5 Canvas.
  • Face and background of the wheel are images you can easily replace.
  • Ability to set power level; higher the power the faster the wheel will initially spin.
  • Prize Detection feature that allows you to specify the prizes displayed on the wheel and have the code inform you of the prize pointed to when the wheel stops.
  • Spinning mode can be random or the prize/angle the wheel is to stop at pre-determined by server-side process.
  • Fully commented source code to explain how it all works so you can understand it and alter as needed for your own projects.


More:

Dynamic Pie Graph


Dynamic Pie Graph
Current version: 1.1
(14 Jul 2013)

Description:
In this project I used what I had learned about HTML canvas rotation from the original winning wheel to create a 2 segment pie graph where the sizes of the segments dynamically change - growing or shrinking - due to changes in the data and also when the page first loads.


Admittedly there are a lot better pie graphing solutions out there these days; The plan is to replace this with a new project that will draw the segments on the canvas using code (arc and line functions) rather than the current image rotation method.


Features include:

  • Pie rendered using HTML5 Canvas rotation.
  • Animation when page first loads from 0 degrees / 12 o'clock to the current value.
  • Size of segments change as the data used to create the pie changes.
  • This pie graph can also work for browsers that don't support canvas by falling back to standard images (no animation though).


More: