document.addEventListener('DOMContentLoaded', function() {

    //setup

    var

    game_el = document.getElementById('game'),

    game_dims = {w: game_el.offsetWidth, h: game_el.offsetHeight},

    stage = new Kinetic.Stage({

        container: game_el,

        width: game_dims.w,

        height: game_dims.h

    }),

    layer = new Kinetic.Layer(),

​

    //ship hul

    hull = new Kinetic.Shape({

        drawFunc: function(ctx) {

            ctx.arc(game_dims.w / 2, game_dims.h * 0.6, game_dims.h * 0.45, 0, Math.PI, true);

            this.fill(ctx);

        },

        fill: 'red'

    }),

​

    //ship disc

    disc = new Kinetic.Circle({

        x: game_dims.w / 2,

        y: game_dims.h * 0.6,

        radius: {x: game_dims.w * 0.45, y: 30},

        fill: '#888'

    });

    //draw

    layer.add(hull);

    layer.add(disc);

    stage.add(layer);

​

    /* ******** WIERDNESS ******** */

    /* Why does the moveToTop() line overwrite the

       colour of the disc? Comment it out and

       the intended colour remains */

    //post-production

    //hull.moveToTop();

    layer.draw();

​

}, false);