Animating a path between two objects on HTML5 canvas

Question

We're developing a game with impactjs that allows 'chaining' of entities as they are clicked. Basically this just draws a line between the two points, with a neon glow effect. So far, so good. Now, we have a request to make the 'chain' connections animated - fire, sparkles, etc. Essentially things that seem like they'd need actual graphic animations to look right. As the entities can be any distance/angle from each other, we're stuck at how to best implement a solution for this - that is, how to draw a diagonal image, for example, between two random points that we can animate. Any thoughts our suggestions on how to pull this off would be much appreciated.

Answer 1

Maybe create a particle entity with an Animation Sheet containing the necessary animations/particle effects. And then draw these particles along the line that from point A to point B.

When you want to animate it to fire/sparkles etc. run the animation for all those entities. in that line.

Answer 2

I'd be inclined to agree with Prat. Particle effects would most likely be what you need. Here is a tutorial on generating particle effects in impact.js that might help you out.

http://www.pointofimpactjs.com/snippets/view/24/particle-effects-generation