Canvas Toy Example

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

by nate

HTML

<canvas id="hslplay" width="400" height="400"></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();
}
 
function drawCircle(options) {
    var options = options || {};
    var settings = {
        x: 0,
        y: 0,
        radius: 1,
        startAngle: 0,
        endAngle: Math.PI*2,
        anticlockwise: true,
        hue: 50,
        saturation: 50,
        lightness: 50
    }
    $.extend(settings, options);
 
    // Draw a circle
    ctx.fillStyle = 'hsl(' + settings.hue + ', ' + settings.saturation + '%, ' + settings.lightness + '%)';
    ctx.beginPath();
        ctx.arc(settings.x, settings.y, settings.radius, settings.startAngle, settings.endAngle, settings.anticlockwise);
    ctx.closePath();
    ctx.fill();
}
 
function drawTriangle(options) {
    var options = options || {};
    var settings = {
        x: 0,
        y: 0,
        radius: 1,
        startAngle: 0,
        endAngle: Math.PI*2,
        anticlockwise: true,
        hue: 50,
        saturation: 50,
        lightness: 50
    }
    $.extend(settings, options);
 
    // Draw a Triangle
    ctx.fillStyle = 'hsl(' + settings.hue + ', ' + settings.saturation + '%, ' + settings.lightness + '%)';
    ctx.beginPath();
        // ctx.arc(settings.x, settings.y, settings.radius, settings.startAngle, settings.endAngle, settings.anticlockwise);
        ctx.moveTo(settings.x - settings.radius, settings.y - settings.radius);
        ctx.lineTo(settings.x + settings.radius, settings.y - settings.radius);
       ...