HTML5 Kinetic.js : Draggable bound just for the canvas size

Question

I read up on the draggable bounds and would like to set for the same size as the canvas (as the image goes out of site at the edge, is this possible?

Answer 1

var image = new Kinetic.Image({
    image : img,
    draggable: true,
  x : 100,
  y : 100,
  dragBoundFunc : function(pos) {
    if (pos.x < 0) {
      pos.x =0;
    }
    if (pos.y < 0) {
      pos.y =0;
    }
    if (pos.x > stage.width() - image.width()) {
      pos.x = stage.width() - image.width();
    }
    if (pos.y > stage.height() - image.height()) {
      pos.y = stage.height() - image.height();
    }
    return pos;
  }
});

DEMO