How to use

To use you'll need a JPS or PNS file, which are steroscopic images (which basically mean two jpegs or pngs next to each other in the same image):

1. Add the Canvas element and the JavaScript to your webpage, (you'll also need to include the imageloader.min.js file)

<canvas id="myCanvas" width="800" height="700">
Your browser does not support the canvas element.
</canvas><script type="text/javascript" src="imageloader.min.js></script>
<script type="text/javascript" src="stereoimage.js"></script>

2. Now call the StereoImage class to do it's stuff with a little Javascript:

<script type="text/javascript">
var settings = {
'canvas-id' : "myCanvas",
'filename' : 'test-image.jps',
'default-display-type' : 2,
'default-draw-type' : 6,
'stereoscopic-scale' : 0.45,
'flick-rate' : 280,
};var stereoImage = new StereoImage( settings );</script>
   

The StereoImage class understands these settings:

• 'canvas-id' : Compulsory. The canvas you want to use.
• 'filename' : Compulsory. The name of the image to load.
• 'default-display-type' : Optional. The startup type of display to show, 0, to 2, defaults to 2.
• 'default-draw-type' : Optional. The startup type of drawing to use, 0 to 6, defaults to 3.
• 'stereoscopic-scale' : Optional. The amount to scale the stereoscopic drawing.
• 'flick-rate' : Optional. The time in millisceonds before switching to the other image in flick draw mode.

Another example with all possible settings.