Canvas Toy Example

This is an example of a simple toy built with canvas.

HTML

<canvas id="hslplay" width="800" height="800"></canvas>

CSS

body {
        background-color: #333;
        padding-top: 50px;
        text-align: center;
    }
    canvas {
        background-color: #fff;
        padding: 10px;
    }

JavaScript

// This is an example of a simple canvas toy I wrote about two years ago.
// I wrote it before I knew about a lot of JS best practices -- hell, I didn't even know what
// hoisting was back then! Please grade it on a curve.

(function(){
// Initialize variables
var canvas,
    $canvas,
    canvasWidth,
    canvasHeight,
    ctx,
    alt = 0;
 
function prepareCanvas() {
    // Initialize canvas
    canvas = document.getElementById('hslplay');
    $canvas = $(canvas);
    ctx = canvas.getContext('2d');
    canvasWidth = $canvas.width(),
    canvasHeight = $canvas.height();
}
 

 
$(document).ready(function(){
        prepareCanvas();/*
        $canvas.mousemove(function(e){
            var mouseX = e.pageX - $canvas.offset().left; 
            var mouseY = e.pageY - $canvas.offset().top;
            var numCircles = Math.round(mouseX / 9);
            var circleLightness = mouseY / (canvasHeight / 100);
            drawShapes({
                shape: 'alternate',
                quantity: numCircles,
                lightness: circleLightness
            });
        });*/
});
 
})();