window.onload = function () {

    var stopped = false;
    var rotDeg = 0;
    var rot = 0;
    var dir = 1;

    var imgW = 32;
    var imgH = 32;

    var frame = 0;
    var maxFrame = 3;
    var frameDir = 1;

    var fps = 5;

    //Game Canvas. 512x512
    var gc = document.getElementById("gameCanvas");
    console.log (gc);
    var gctx = gc.getContext("2d");

    //This is the key ingredient for hard-pixel scaling without any interpolation
    gctx.imageSmoothingEnabled = false;
    gctx.webkitImageSmoothingEnabled = false;
    gctx.mozImageSmoothingEnabled = false;

    //The non-scaled 32x32 canvas
    var c = document.getElementById("smallCanvas");
    console.log (c);
    var ctx = c.getContext("2d");


    //Load a spritesheet
    var imageObj = new Image();

    imageObj.onload = function() {
        gameIntervalID = setInterval (gameLoop, 1000/ fps);
    };
    imageObj.src = 'LowRezDerpSheet.png';


    function gameLoop () {
        console.log ("gameloop");

        updateImage ();

        if (stopped) {
            clearInterval (gameIntervalID);
        }
    }

    function updateImage () {

        //Clear the canvases.
        c.width = c.width;
        gctx.clearRect (0, 0, 512, 512);

        //center the drawing on 1/2 sprite width
        ctx.translate (16, 16);

        //Draw a frame of the animation
        ctx.drawImage(imageObj,frame*imgW, 0, 32, 32,-16, -16, 32, 32);
        gctx.drawImage (c, 0, 0, 512, 512);

        //Tick through frames, then go in reverse.
        frame += frameDir;
        if (frame >= maxFrame || frame <= 0) {
            frameDir*= -1;
        }
    }
}