title: How to delete image(element) from canvas
body: <p>I am developing hotel floor view using canvas with the help of kinetic js.I want to provide an option to delete current dragged,dropped image on canvas.</p>
  
  <p>this is my code for only drag drop of image and not with delete option :</p>
  
  <pre><code>// get a reference to the house icon in the toolbar
  // hide the icon until its image has loaded
  var $house=$("#house");
  $house.hide();
  
  // get the offset position of the kinetic container
  var $stageContainer=$("#container");
  var stageOffset=$stageContainer.offset();
  var offsetX=stageOffset.left;
  var offsetY=stageOffset.top;
  
  // create the Kinetic.Stage and layer
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
  });
  var layer = new Kinetic.Layer();
  stage.add(layer);
  
  // start loading the image used in the draggable toolbar element
  // this image will be used in a new Kinetic.Image
  var image1=new Image();
  image1.onload=function(){
    $house.show();
  }
  image1.src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png";
  
  // make the toolbar image draggable
  $house.draggable({
    helper:'clone',
  });
  
  // set the data payload
  $house.data("url","house.png"); // key-value pair
  $house.data("width","32"); // key-value pair
  $house.data("height","33"); // key-value pair
  $house.data("image",image1); // key-value pair
  
  // make the Kinetic Container a dropzone
  $stageContainer.droppable({
    drop:dragDrop,
  });
  
  // handle a drop into the Kinetic container
  function dragDrop(e,ui){
  
    // get the drop point
    var x=parseInt(ui.offset.left-offsetX);
    var y=parseInt(ui.offset.top-offsetY);
  
    // get the drop payload (here the payload is the image)
    var element=ui.draggable;
    var data=element.data("url");
    var theImage=element.data("image");
  
    // create a new Kinetic.Image at the drop point
    // be sure to adjust for any border width (here border==1)
    var image = new Kinetic.Image({
      name:data,
      x:x,
      y:y,
      image:theImage,
      draggable: true
    });
    layer.add(image);
    layer.draw();
  }
  body{padding:20px;}
  #container{
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
  }
  #toolbar{
    width:350px;
    height:35px;
    border:solid 1px blue;
  }
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;h4&gt;Drag from toolbar onto canvas. Then drag around canvas.&lt;/h4&gt;
  &lt;div id="toolbar"&gt;
    &lt;img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"&gt;&lt;br&gt;
  &lt;/div&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  </code></pre>