Drawing a path on canvas using for loop in javascript
<p>I want to draw a path on canvas using a for loop. I do not want to draw the normal way, I need to use a for loop. Now, the coords work perfectly, but the problem is that the last click draws lines to each of the previous clicks, while I only want to draw a path. I know that I should make a copy of the "i" but I can't make it work.</p>

<pre><code>function draw(event) {

var coords = getMouseCoords(event);
xpos = coords[0];
ypos = coords[1];

for(i=0; i&lt;myArray.length; i++) {
    context.beginPath();
    context.moveTo(coords[0], coords[1]);
    context.lineTo(myArray[i].x, myArray[i].y);
    context.stroke();
}
myArray.push({x:coords[0], y:coords[1]});
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;canvas width="600" height="480" id="myCanvas" onclick="draw(event)"&gt;&lt;/canvas&gt;
</code></pre>

<p>Could you take a look at it and see if you can fix the problem? No JQuery please.</p>

<p>Thanks,</p>

<p>Marco</p>