Kinetic circle won't draw on button click

So I am trying to draw a circle within my defined stage from a button click. I am receiving no errors on the page and no errors after the click. I have used debug messages and the code is executing but I cannot see any image show up or any indication of an error. Can I get some help with this please? Thank you.

Here is my javascript code(this is my first post I hope I did this properly)

var height = $(".game").height();
var width = $(".game").width();
$(function () {
    $('#head').on('click', function () {
        shapeMaker.createHead();
    });
});

var shapeMaker = {
    stage: null,
    head: null,

    createHead: function () {

        var stage = new Kinetic.Stage({
            container: 'game',
            width: $('.game').width(),
            height: $('.game').height()
        });

        var head = new Kinetic.Layer();
        var circle = new Kinetic.Circle({
            x: 0,
            y: 0,
            radius: stage.getHeight() / 3,
            fill: '#FFDF5E',
            stroke: 'black',
            strokeWidth: 3
        });

        // add the shape to the layer
        head.add(circle);

        // add the layer to the stage
        head.draw();
        stage.add(head);
    }
}

Solution

Use id's instead of classes

// game board

<div id="game"></div>

$("#game")

// button

<button id="head">Build</button>

$('#head')

Here's code and a Demo: http://jsfiddle.net/m1erickson/Uh8XW/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#game{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    $('#head').on('click', function(){
        shapeMaker.createHead(); 
    });

    var shapeMaker = {

        stage: null,
        head: null,
        createHead: function() {

            var stage = new Kinetic.Stage({
                container: 'game', 
                width: $('#game').width(), 
                height: $('#game').height()
            });
            var head = new Kinetic.Layer();
            stage.add(head);

            var circle = new Kinetic.Circle({
                x: 0,
                y: 0,
                radius: stage.getHeight() / 3,
                fill: '#FFDF5E',
                stroke: 'black',
                strokeWidth: 3
            });
            head.add(circle);
            head.draw();
        }

    }

}); // end $(function(){});

</script>       
</head>
<body>
    <button id="head">Build</button>
    <div id="game"></div>
</body>
</html>