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.
Click the project image to see a working example.
Current version: 1.2
(14 Jul 2013)
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.
- 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.
Dynamic Pie Graph
Current version: 1.1
(14 Jul 2013)
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.
- 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).