HTML5 Canvas Drag and Drop an Image

To drag and drop an image with KineticJS, we can set the draggable property to true when instantiating an Image, or we can use the setDraggable() method.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.5.2-beta.js"></script>
    <script defer="defer">
      function drawImage(imageObj) { 
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

// darth vader
        var darthVaderImg = new Kinetic.Image({
          image: imageObj,
          x: stage.getWidth() / 2 - 200 / 2,
          y: stage.getHeight() / 2 - 137 / 2,
          width: 200,
          height: 137,
          draggable: true
        });

// add cursor styling
        darthVaderImg.on('mouseover', function() {
          document.body.style.cursor = 'pointer';
        });
        darthVaderImg.on('mouseout', function() {
          document.body.style.cursor = 'default';
        });

layer.add(darthVaderImg);
        stage.add(layer);
      }
      var imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

</script>
  </body>
</html>

< Drag and Drop Drag a Group >

More Examples

Modified on April 9th, 2013 by Eric Rowell