Recommend this page to a friend!
  Classes of Harish Chauhan   JavaScript Spin Wheel Game   Download  
Role: Documentation
Content type: text/markdown
Description: Documentation
Class: JavaScript Spin Wheel Game
Display a wheel that rotates until it is stopped
Author: By
Last change: readme updated
modified readme
Date: 2 years ago
Size: 1,625 bytes


Class file image Download



  • 10 Sep 2018

This library needs jquery to run. Create spinning prize wheels using HTML canvas.


This is a feature packed JavaScript library that allows you to easily create HTML5 canvas Spin Wheels highly configurable jQuery plugin class.

Wheels can be animated using inbuild easing functions and many other powerful animation features.

Features Include: * Easy to use, highly configurable. * Draw wheels using code generated. * Numerous text orientation, direction, size and colour options. * Priority wise prize stopping location. * Play sounds while the wheel is spinning including a "tick" sound. * It is free to use with an open source licence.


  • slices: wheel slice data, you can provide additional style for each style to overload default text style like style: { text: { color: '#ffffff', font: 'sans-serif', font_size: 10, shadow: { blur: 6, color: '#d011dd' }, stroke: { width: 1, color: '#d011dd' } } }
  • skin: right now 2 skins available, default and wood. You can extend or create new skins easily. Check example code to check to extend skin
  • radius: radius of wheel
  • tick_sound: if you want to tick on each slice pass
  • duration: rotation duration
  • speed: speed of duration, min speed is 1
  • events: onStop and onArrowTick

Spin function have 2 parameters to overload default speed and duration like spin(seed, duration)


Spin Wheel options

Check example.html included in source


TODO: I am not having time to write a guide for now, but in future will do so.