title: Javascript render text in canvas and avoid collision of text
body: <p>I'm developing a mapping software that renders text from database to a specific coordinate on the canvas. The objective is for the rendered text not to step on each other (not to overlap) but still follow the coordinate where it should display. The idea is, if the rendered texts overlaps, the program may opt to display it at an angle. Currently I'm rendering text via the code below: </p>
  
  <pre><code>create_point:function(x,y,stitle){
          var canvas = document.getElementById('text-layer');
          var context = canvas.getContext('2d');
          context.fillText(stitle,x,y); // text and position
          context.save();
  }
  </code></pre>
  
  <p>Any ideas on this? </p>
  
  <p>Thanks in advance :-)</p>