title: Aligning text objects next to each other - KineticJS
body: <p>I have text objects and label objects which are seperate. They need to be aligned next to each other when being drawn. I'm adding the x and y co-ordinates but the objects are off by some pixels and are not on the same line. Here is my code. I have added the picture of how the text is being rendered.</p>
  
  <pre><code>![var extractedSubString  = text.substring(currentTextOffset,value.begin-1)
              console.log(extractedSubString)
              currentTextOffset += value.end
  
               var complexText = new Kinetic.Text({
                  x:x,
                  y:y,
                  width:3000,
                  text: extractedSubString,
                  fontSize: 14,
                  fontFamily: 'Helvetica',
                  fill: '#555',
                  align: 'left'
              });
  
              x += complexText.getTextWidth()
              y += complexText.getHeight()
  
              group.add(complexText)
              var simpleLabel = new Kinetic.Label({
                  opacity: 0.75,
                  x:x,
                  y:y,
                  text: {
                      text: value.data,
                      fontFamily: 'Helvetica',
                      fontSize: 14,
                      padding: 5,
                      fill: '#555'
                  },
                  rect: {
                      fill: labelColor
                  }
              });
  
              group.add(simpleLabel)
              x +=simpleLabel.getWidth()
              y +=simpleLabel.getHeight()][1]
  </code></pre>