title: Nodes overlapping while drawing a binary tree in canvas
body: <p>I'm trying to draw a binary tree on canvas. From the server side form data is sent. The data are: text to insert the tree, position on the x axis position on the y axis.</p>
  
  <p>When I say "the x axis and y axis position", I mean the arrangement of nodes in a binary tree, I'll try to explain as clearly as possible with a graphic example:</p>
  
  <pre><code>                (0,0)
                  /   \
            (-1,1)     (1,1)
            /    \     /   \
        (-2,2) (0,2) (0,2) (2,2)
  </code></pre>
  
  <p>This is: the root is in the position (0,0), the left child in the position (-1,1) (increases in depth, but decreases in width.), the right child (1,1) and so on. The problem is that in some position, two nodes of diferent parent will coincide and one of them will overlap the other.</p>
  
  <p>I am having the components in this way because, in the server side, the pairs are formed while the binary tree is traversed (when I walk into a child of the current node I sum 1 to the second component of the pair; if the child is in the left, then I residue 1 in the first component, but if the child is in the right, I sum 1 to the first component).</p>
  
  <p>My canvas code is:</p>
  
  <pre><code>                var TreeDrawer = (function(){
                      var _depth = 20
                        , _breadth = 15
                        , _rootX = width/2
                        , _rootY = 50
                        ;
  
                      var _context = getContext("2d");
  
                      _context.textAlign = "center";
                      _context.fillStyle = "black";
                      _context.font = "16px Verdana";
  
  
                      var _getX = function (x) {
                          return _rootX + (x * 80);
                      }
  
                      var _getY = function(y) {
                          return _rootY + (y * 50);
                      }
  
                      var _drawText = function(partialText, x, y) {
  
                          console.log(x, y);
                          _context.fillText(partialText, x, y);
                      }
  
                      return {
                          drawRoot: function (value) {
                              _drawText(value, _rootX, _rootY);
                          },
  
                          drawNode: function(value, x, y) {
                              _drawText(value, _getX(x), _getY(y));
                          }
                      }
                  });
  
                  var _tree = new TreeDrawer();
                  _tree.drawRoot("Raíz");
                  _tree.drawNode("Nodo", -1, 1);
                  _tree.drawNode("Nodo", 1, 1);
  
                  _tree.drawNode("Nodo", -2, 2);
                  _tree.drawNode("Nodo", 0, 2);
  
                  _tree.drawNode("Nodo", 2, 2);
                  _tree.drawNode("Nodo", 0, 2);
  </code></pre>
  
  <p>So, the question is: what I can do to solve this problem ?, ie plot the tree without overlapping.</p>
  
  <p><strong>PS:</strong> </p>
  
  <ul>
  <li>I do not want libraries because my project is written in C++ (using Qt), so the libraries will not work.</li>
  <li>In this example I am inserting nodes explicitly, ie, I'm calling twice the <code>_tree.drawNode ("Node", 0,2)</code> method and it is obvious that the nodes are going to overlap. What I mean is, I want to make an internal method to adjust my tree in these situations (I do not know which will be the inputs coming from the server side).</li>
  <li>If it helps, I can determine a priori how many leaves will have the tree.</li>
  </ul>