HTML5 Canvas: Cannot change line width

The drawing of the line happens not before calling stroke() and the line width that is set at this moment will be used for it. Every time, you have set the lineWidth without calling stroke() before, the width specified before was overwritten without drawing.

You have to proceed in a way something like this:

ctx.beginPath();
ctx.moveTo(0, 0);        
ctx.lineTo(10, 10);
ctx.lineWidth = 1;
ctx.stroke();  

ctx.beginPath();
ctx.moveTo(10, 10);        
ctx.lineTo(20, 20);
ctx.lineWidth = 2;
ctx.stroke();  


ctx.beginPath();
ctx.moveTo(20, 20);        
ctx.lineTo(30, 30);
ctx.lineWidth = 3;
ctx.stroke(); 

However, you should better use a loop instead of coding each change by hand.
2014-05-22 at 23:18