title: I couldn't save the canvas using toDataURL in kineticJs
body: <p>Hi friends I have followed this tutorial : <a href="http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/" rel="nofollow">http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/</a></p>
  
  <p>I have created a same program with different concept(I have used a drag and drop that if you drop an image to canvas it will draw that image in canvas). But now I couldn't save the canvas using toDataURL. Please help me..</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body {
          margin: 0px;
          padding: 0px;
        }
        canvas {
          border: 1px solid #9C9898;
        }
        #buttons {
          position: absolute;
          left: 10px;
          top: 0px;
        }
        button {
          margin-top: 10px;
          display: block;
        }
      &lt;/style&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
      &lt;script src="http://html5demos.com/h5utils.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.6.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
      function update(group, activeAnchor) {
          var topLeft = group.get(".topLeft")[0];
          var topRight = group.get(".topRight")[0];
          var bottomRight = group.get(".bottomRight")[0];
          var bottomLeft = group.get(".bottomLeft")[0];
          var image = group.get(".image")[0];
  
          // update anchor positions
          switch (activeAnchor.getName()) {
            case "topLeft":
              topRight.attrs.y = activeAnchor.attrs.y;
              bottomLeft.attrs.x = activeAnchor.attrs.x;
              break;
            case "topRight":
              topLeft.attrs.y = activeAnchor.attrs.y;
              bottomRight.attrs.x = activeAnchor.attrs.x;
              break;
            case "bottomRight":
              bottomLeft.attrs.y = activeAnchor.attrs.y;
              topRight.attrs.x = activeAnchor.attrs.x;
              break;
            case "bottomLeft":
              bottomRight.attrs.y = activeAnchor.attrs.y;
              topLeft.attrs.x = activeAnchor.attrs.x;
              break;
          }
  
          image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
          image.setSize(topRight.attrs.x - topLeft.attrs.x, bottomLeft.attrs.y - topLeft.attrs.y);
        }
        function addAnchor(group, x, y, name) {
          var stage = group.getStage();
          var layer = group.getLayer();
  
          var anchor = new Kinetic.Circle({
            x: x,
            y: y,
            stroke: "#666",
            fill: "#ddd",
            strokeWidth: 2,
            radius: 8,
            name: name,
            draggable: true
          });
  
          anchor.on("dragmove", function() {
            update(group, this);
            layer.draw();
          });
          anchor.on("mousedown touchstart", function() {
            group.draggable(false);
            this.moveToTop();
          });
          anchor.on("dragend", function() {
            group.draggable(true);
            layer.draw();
          });
          // add hover styling
          anchor.on("mouseover", function() {
            var layer = this.getLayer();
            document.body.style.cursor = "pointer";
            this.setStrokeWidth(4);
            layer.draw();
          });
          anchor.on("mouseout", function() {
            var layer = this.getLayer();
            document.body.style.cursor = "default";
            this.setStrokeWidth(2);
            layer.draw();
          });
  
          group.add(anchor);
        }
  
        window.onload = function() {
  
          var stage = new Kinetic.Stage({
            container: "container",
            width: 578,
            height: 200,
          });
          var layer = new Kinetic.Layer();
          var rect = new Kinetic.Rect({
            x: 239,
            y: 75,
            width: 100,
            height: 50,
            fill: "#00D2FF",
            stroke: "black",
            strokeWidth: 4
          });
  
  
          function cancel(e) {
              if (e.preventDefault) {
              e.preventDefault();
          }
              return false;
          }
  
          var drop = document.querySelector('#container');
  
          // Tells the browser that we *can* drop on this target
          addEvent(drop, 'dragover', cancel);
          addEvent(drop, 'dragenter', cancel);
  
          addEvent(drop, 'drop', function (e) {
          if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
  
          var path = e.dataTransfer.getData('Text')
  
          loadImgs(stage,path);
  
          });
  
          // add the shape to the layer
          layer.add(rect);
  
          // add the layer to the stage
          stage.add(layer);
  
          document.getElementById("save").addEventListener("click", function() {
            stage.toDataURL(function(dataUrl) {
              window.open(dataUrl);
            });
  
          }, false);
  
        };
  
      function loadImgs(stage,url)
      {
          var yodaGroup = new Kinetic.Group({
            x: 100,
            y: 110,
            draggable: true
          });
  
          var layer = new Kinetic.Layer();
          layer.add(yodaGroup);
          stage.add(layer);
  
          var imageObj = new Image();
  
          imageObj.onload = function() {
  
            var image = new Kinetic.Image({
  
              x: 0,
              y: 0,
              image: imageObj,
              width: 93,
              height: 104,
              name : "image"
            });
          yodaGroup.add(image);
              addAnchor(yodaGroup, 0, 0, "topLeft");
              addAnchor(yodaGroup, 93, 0, "topRight");
              addAnchor(yodaGroup, 93, 104, "bottomRight");
              addAnchor(yodaGroup, 0, 104, "bottomLeft");
  
              yodaGroup.on("dragstart", function() {
                  this.moveToTop();
              });
  
          stage.draw();
      };
  
      imageObj.src = url;
  }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;img src="http://twitter.com/api/users/profile_image/rem" alt="Remy Sharp" /&gt;
      &lt;img src="http://twitter.com/api/users/profile_image/brucel" alt="Bruce Lawson" /&gt;
      &lt;img src="http://twitter.com/api/users/profile_image/Rich_Clark" alt="Rich Clark" /&gt;
        &lt;div id="buttons"&gt;
        &lt;button id="save"&gt;
          Save as image
        &lt;/button&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>