jQuery Boilerplate

by nwellcome

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="container">
            <header></header>
            <div id="main" role="main">
                <canvas id="canvas" width="600" height="600" />
            </div>
            <footer></footer>
        </div> 
    </body>
</html>

JavaScript

var context;
var radian = 0.01;
var w, h;
$(document).ready(function() {
    w = document.width;
    h = document.height;
    var canvas = $('#canvas');
    context = canvas[0].getContext('2d');
    canvas[0].width = w;
    canvas[0].height = h;
    setInterval(startAnim, 10);
});

function startAnim() {
    context.rotate(radian)
    context.strokeStyle = 'rgb(0,0,0)';
    context.fillStyle = 'rgb(0,0,0)';
    context.fillRect(0, 0, w, h);
    context.strokeStyle = 'rgb(0,0,0)';
    context.fillStyle = 'rgb(255,255,0)';
    context.strokeRect(w/2-50, w/2-50, w/2+50, w/2+50);
    context.fillRect(w/2-50, w/2-50, w/2+50, w/2+50);

}