title: KineticJS - Use of coordinates while drawing shape
body: <p>I want to use KineticJS to draw a set of complex shapes in a grid. My shapes are 80 wide and 150 high. When I draw them, there is a gap between the shapes that is the width/height of the shapes - I expected them to be butted up against each other in a tight grid, not separated. </p>
  
  <p>It looks like somehow I'm drawing each shape at twice the x/y that it should be. </p>
  
  <p>I've simplified my problem into the attached code. My shape is complex, but to keep the code simple I've replaced my shapes by rectangles (I know that I could use the Rect object just to draw rectangles). </p>
  
  <p>When you run this code you will see 8 rectangles widely separated both horizontally and vertically; to be clear, what I want is each of the rectangles tightly butted up against each other. </p>
  
  <p>I'm using constants width and height both to draw the rectangles in function drawFunc, and to position the rectangles (in the code <code>xPos = ((cols -1) * width)</code> so I would have thought that they would be tight against each other. </p>
  
  <p>The code is pretty simple. I loop through the rows and cols, I create a drawFunc for my shape, I use the width/height in the drawing, and then I position the shape according to its row/col using the same width/height. So they should be tight against each other, not widely separated.</p>
  
  <p>Confused.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  body {
      margin: 0px;
      padding: 0px;
  }
  &lt;/style&gt;
  &lt;script src="http://www.kineticjs.com/download/kinetic-v3.9.8.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      window.onload = drawKineticGrid;
  
  
      function drawKineticGrid() {
  
          var width = 80;
          var height = 150;
  
          var stage = new Kinetic.Stage({
              container : "container",
              width : 800,
              height : 600
          });
  
          var layer = new Kinetic.Layer();
          var messageLayer = new Kinetic.Layer();
  
          for (rows = 1; rows &lt;= 2; rows++) {
  
              for (cols = 1; cols &lt;= 4; cols++) {
                  var aRect = new Kinetic.Shape({
                      name : "" + rows + ":" + cols,
                      drawFunc :    function() {
  
                          var context = this.getContext();
                          context.beginPath();
  
                          // Make a simple shape - my actual shape is more complex, but I'm
                          // writing a rectangle here to keep the code simple - I know I could use
  
                          // the KineticJS Rect class here instead.
  
                          context.moveTo(this.getX(), this.getY());
                          context.lineTo(this.getX() + width, this.getY());
  
                          context.lineTo(this.getX() + width, this.getY() + height);
  
                          context.lineTo(this.getX(), this.getY() + height);
  
                          context.lineTo(this.getX(), this.getY());
  
                          context.lineWidth = 2;
                          context.stroke();
  
                          this.fill();
                          this.stroke();
  
                          // Draw the X and Y, Row and Col values in the rectangle
                          context.fillText("x,y : " + this.getX() + ", " + this.getY(), this.getX() + 5, this.getY() + 15);
  
                          context.fillText("row, col : " + this.getName(), this.getX() + 5, this.getY() + 30);
  
                      },
                      fill : "#ffffff",
                      stroke : "green",
                      strokeWidth : 1
                  });
  
                  //add the  shape to the layer
                  var xPos = ((cols - 1) * width);
                  var yPos = ((rows - 1) * height);
  
                  aRect.setX(xPos);
                  aRect.setY(yPos);
                  layer.add(aRect);
              }
          }
  
          // Add the layer to the stage
          stage.add(layer);
          stage.add(messageLayer);
  
      };
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>