How to draw a lot of width lines on HTML5 canvas?

Question

I am working on a program that should draw a network of objects on the screen like a thought, and then make connections between the objects. The line width should represent the bond strength. Connections change over time, but many connections are not drawn correctly. I am 100% sure that I am really changing the correct connection, and that I just draw it poorly.

So this is how I am trying to do this, could you tell me what I am doing wrong? And how do I do it right?

for (o = 0; o < self.brain.objects.length; o++) for (con = 0; con < 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(); } 

Answer 1

You have the correct code for drawing lines of different widths.

Here is a jsFiddle that shows the code in action, http://jsfiddle.net/q9LRs/

The problem most likely arises when calculating your line. You may also need to call closePath () in some browsers.

Try to simplify your example and post the working code so that we can see what the problem is.