Interaktiv Canvas

// set up a stage
var stage = new Kinetic.Stage({
    // the id of the div we will host this in
    container: 'test1',
    width: 350,
    height: 200
});
 
// make two layers
var layer1 = new Kinetic.Layer();
var background = new Kinetic.Layer();
 
// set up the background
var back = new Kinetic.Rect({
    x:0, y:0, width:stage.getWidth(), height:stage.getHeight(),
    fill: 'yellow', stroke: 'black', strokeWidth: 1
});
 
// make two  shapes, a circle and a rectangle
var circ = new Kinetic.Circle({
    x: 150,    y: 150,    radius: 40,
    fill: 'blue',stroke: 'black',strokeWidth: 1
});
var rect = new Kinetic.Rect({
    x: 100,    y: 75,width: 100, height: 50,
    fill: 'red', stroke: 'black', strokeWidth: 1,
});
 
// make them draggable
circ.setDraggable(true);
rect.setDraggable(true);
 
// set cursor when we enter and leave
circ.on('mouseover', function() {
  stage.container().style.cursor = 'pointer';
  // or: document.body.style.cursor = 'pointer';
});
circ.on('mouseout', function() {
  stage.container().style.cursor = 'default';
}); 
rect.on('mouseover', function() {
  stage.container().style.cursor = 'pointer';
});
rect.on('mouseout', function() {
  stage.container().style.cursor = 'default';
}); 
 
// make sure the object we start dragging will be on top
circ.on("mousedown",function(){
    circ.moveToTop();
    layer1.draw();}
);
rect.on("mousedown",function(){
    rect.moveToTop();
    layer1.draw();}
);
 
// add the shapes to the layers
background.add(back);
layer1.add(rect);
layer1.add(circ);
 
// add the layers to the stage
stage.add(background);
stage.add(layer1);