Issue with jquery + canvas and drawing lines

I'm trying to set up a script that will search for multiple keywords and then draw a line to connect them with canvas. But I've run into an issue where it starts to 开发者_如何学Godraw the second line but it uses some of the x y outputs of the previous line.

Here's what I have: http://jsfiddle.net/LCfqj/

Any Help would be greatly appreciated!

---

Since you search and replace each term using the same class ("word") it has an additive effect. Instead of using the same class for each term, use something unique each time. "word1","word2" or word plus the search term.

I've added an alert that shows this in practice:

http://jsfiddle.net/A4rPQ/

You will see that each time you search for a term you will get 2 additional results from $(".word").length.

Also keep in mind that if the search term naturally exists more than once, you will need to draw additional lines, so your approach will need rethinking. One way is that your findElement method returns an array of all of the lineInfo required to connect all of the points.

---

Maybe you should save and restore the context state before drawing the line.
From what I saw you are just restoring the context in the draw line function but not saving it at the function call.