Winwheel.js tutorial: #1 Getting Started


This tutorial demonstrates how to get started with the Winwheel library.
If you have not already done so, you can download the library here. After you have downloaded, unzip the file.


To start using the Winwheel library, there are 3 main steps...

  1. Include the Winwheel library file - Winwheel.js on an HTML page.
  2. Add a Canvas on to the HTML page for use by the Winwheel code.
  3. Create a Winwheel object within script tags on the HTML page.



Example Code

<html>
    <head>
        <title>My Winning Wheel</title>
        <script src='Winwheel.js'></script>
    </head>
    <body>
        <canvas id='canvas' width='880' height='300'>
            Canvas not supported, use another browser.
        </canvas>
        <script>
            let theWheel = new Winwheel();
        </script>
    </body>
</html>


Output on the Canvas

Canvas not supported, use another browser.


Additional Notes

As you see the default for the wheel is 1 grey segment. Not very interesting, but means the wheel code is working. If you don't see the grey wheel then check you have given the canvas the id 'canvas' (see note below).


Tip #1:
If you give the canvas the id of 'canvas' the wheel code will automatically use it. If not then you need to specify the canvasId as one of the parameters when creating the wheel (covered in the next tutorial).


Tip #2:
Use the Winwheel.min.js file on your website instead of Winwheel.js if you don't plan to read or alter the Winwheel code. Winwheel.min.js is a compacted copy of Winwheel.js which is smaller in size so takes less time to load in a web browser.



Previous:
< Documentation Index 		Next:
#2: Constructor Parameters >