title: Draw shapes with mousemove, drag and drop and resize with kineticjs- KineticJS
body: <p>I am working on a simple paint program with KineticJS. What I have to achieve is to draw a rectangle, line or circle with mouse movement and the drawn shapes can be dragged or resized by mouse. My problem is, I have to use <code>mousedown</code> and <code>mousemove</code> event to do the drawing, but I cannot achieve drag and drop or resize at the same time. </p>
  
  <p>Here is my code for the drawing:</p>
  
  <pre><code>stage.on("mousedown", function() {
      if ((drawFlag == 1) &amp;&amp; (dragFlag == 0)) {
          if (moving) {
              moving = false;
              layer.draw();
          } else {
              var mousePos = stage.getMousePosition();
              line = new Kinetic.Line({
                  points: [0, 0, 50, 50],
                  stroke: "red"
              });
              layer.add(line);
  
              line.getPoints()[0].x = mousePos.x;
              line.getPoints()[0].y = mousePos.y;
              line.getPoints()[1].x = mousePos.x;
              line.getPoints()[1].y = mousePos.y;
  
              moving = true;
              layer.drawScene();
          }
      }
  
      if ((drawFlag == 2) &amp;&amp; (dragFlag == 0)) {
          if (moving) {
              moving = false;
              layer.draw();
          } else {
              var mousePos = stage.getMousePosition();
              rect = new Kinetic.Rect({
                  x: 20,
                  y: 20,
                  fill: "red",
                  stroke: "black",
                  strokeWidth: 2,
                  draggle: true,
                  width: 0,
                  height: 0
              });
  
              rect.setX(mousePos.x);
              rect.setY(mousePos.y);
              rect.setWidth(0);
              rect.setHeight(0);
  
              moving = true;
              layer.drawScene();
  
  
  
              layer.add(rect);
  
              Rects.push(rect);
          }
      }
  });
  
  stage.on("mousemove", function() {
      if ((drawFlag == 1) &amp;&amp; (dragFlag == 0)) {
          if (moving) {
              var mousePos = stage.getMousePosition();
              var x = mousePos.x;
              var y = mousePos.y;
              line.getPoints()[1].x = mousePos.x;
              line.getPoints()[1].y = mousePos.y;
              moving = true;
              layer.drawScene();
          }
      }
      if ((drawFlag == 2) &amp;&amp; (dragFlag == 0)) {
          if (moving) {
              var mousePos = stage.getMousePosition();
              var x = mousePos.x;
              var y = mousePos.y;
              rect.setWidth(mousePos.x - rect.getX());
              rect.setHeight(mousePos.y - rect.getY());
              moving = true;
              layer.drawScene();
          }
      }
  });
  
  stage.on("mouseup", function() {
      moving = false;
  });
  </code></pre>
  
  <p>After drawing a rectangle, when I click on it, it is supposed to be dragged with mouse movement. But, in my program, clicking on a drawn rectangle results in drawing another one instead of dragging it. So I tried to use a dragFlag to indicate whether I am drawing or dragging. And I use a function to check whether mouse cursor is over any of the drawn rectangles:</p>
  
  <pre><code>for (var n = 0; n &lt; Rects.length; n++) {
      (function() {
          Rects[n].on('mouseover', function() {
              dragFlag = 1;
              document.body.style.cursor = "pointer";
          });
  
          Rects[n].on('mouseout', function() {
              dragFlag = 0;
              document.body.style.cursor = "default";
          });
          if (dragFlag == 1) {
              Rects[n].on("dragstart", function() {
                  Rects[n].moveToTop();
                  layer.draw();
              });
  
              Rects[n].on("dragmove", function() {
                  document.body.style.cursor = "pointer";
              });
          }
  
      });
  </code></pre>
  
  <p>But it wouldn't work. The position of my mouse cursor cannot be checked so that I am stilling drawing a new rectangle while clicking on a drawn one. Anyone knows how to achieve drawing with mouse movement, and drag and drop on drawn shapes? </p>
  
  <p>I appreciate your help.</p>