KinetJS zoom and pan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
<a href="http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-circle-tutorial/">Circle Tutorial</a>
<br/>
<br/>
<div id="container"></div>

CSS

body, html {
    margin:0px; height: 100%; width: 100%;
}
#container {
    border: 0px dotted black; height: 100%; width: 100%;
}
canvas { background: #eee;
}

JavaScript

$( function() {
    
    var stage = new Kinetic.Stage({
        container : 'container',
        width: $("#container").width(),
        height: $("#container").height(),
        draggable: true
    });
    var layer = new Kinetic.Layer();

    //layer.setDraggable("draggable");
    var center = { x:stage.getWidth() / 2, y: stage.getHeight() / 2};
    
    var circle = new Kinetic.Circle({
        x: center.x-100,
        y: center.y,
        radius: 50,
        fill: 'green',
        draggable: true
    });
    layer.add(circle);
    layer.add(circle.clone({x: center.x+100}));

        stage.add(layer);
     layer.setScale(20);
});