Drawing lines between sprites with delay

[trasheater]

I am currently building a puzzle game that requires sprites to be highlighted sequentially. I also need lines to be drawn between the sprites as they are highlighted.

 

As you can see from the example 1 I am using a setTimeout to delay the highlighting of the sprites but when the code for the lines is put within the setTimeout nothing is drawn.

I think this is a scoping issue but I am not able to figure this one out. Any ideas?

 

Example 1: https://jsfiddle.net/trasheater/b0xhbjge/

 

Example 2: https://jsfiddle.net/trasheater/b0xhbjge/2/

 

Thanks

[MichaelD]

Its quite strange because I can make it to draw lines to 0,0 like this: https://jsfiddle.net/mfodmuub/

 

I'll look at it again its quite intriguing...

[trasheater]

That is progress. I know its not a scpoing issue now. I need to do some more testing on this.

 

Its a weird issue and it should work as far as I can tell.

[trasheater]

I figured out a work around for this.

 

https://jsfiddle.net/trasheater/6fdh8b3t/

 

 

It seems that it did not like being moved to the location of the sprite when the function was called so I created a separate var that was populated with the x,y of the previous sprite and drew the line from previous sprite to current sprite.

 

Its not a real solution but it will work for my purposes.