title: How to correctly draw many different-width lines on the HTML5 canvas?
body: <p>I'm working on a program that should draw a mindmap-like network of objects on the screen, and then draw the connections between the objects. The width of the line should represent the strength of the connection. The connections are altered over time, but many connections are drawn incorrectly. I am 100% sure that I actually alter the correct connection, and that I just draw it badly.</p>
  
  <p>So, here's how I try to draw it, can you please tell me what am I doing wrong? And how do I do it right?</p>
  
  <pre><code>  for (o = 0; o &lt; self.brain.objects.length; o++)
         for (con =  0; con &lt; self.brain.objects[o].connections.length; con++)
         {
              self.screen.lineWidth = Math.sqrt(self.brain.objects[o].connections[con].weight)*5*self.zoom;
  
              self.screen.beginPath();
              self.screen.moveTo((self.brain.objects[o].rect[0] - self.globalPos[0])*self.zoom + (self.brain.objects[o].rect[2]/2)*self.zoom, (self.brain.objects[o].rect[1] - self.globalPos[1] + self.brain.objects[o].rect[3]/2)*self.zoom);
              self.screen.lineTo((self.brain.objects[o].connections[con].to.rect[0] - self.globalPos[0] + self.brain.objects[o].connections[con].to.rect[2]/2)*self.zoom, (self.brain.objects[o].connections[con].to.rect[1] - self.globalPos[1] + self.brain.objects[o].connections[con].to.rect[3]/2)*self.zoom);
              self.screen.stroke();
         }
  </code></pre>