Question

(I’m new to html5… so use small words)

I’m trying to animate a scatterplot of some data (the points move over time).

Right now, I have a series of context.arc() with the specific coordinates and can create one “frame” of the animation.

My initial thought is to use a strategy similar to an animated gif: create a sequence of frames and plot them sequentially with some delay in-between.

Is this a viable approach? If so, how should I delay the rendering? My initial reading indicates that there is no real sleep function, so I’m wondering if this strategy is bad.

(also, any points to software to create html5 markup for scatterplot instead of my low-level coding would be great)

Thanks

Answer 1

Since the canvas element is filled from JavaScript you can use the setTimeout or setInterval functions, see here for more help with JavaScript timers. This would allow you to draw each frame after a predetermined amount of time. An object orientated language such as SVG would probably be more appropriate though, so you can move elements rather than draw over them; most browsers advertising themselves to be “HTML5 compatible” should have reasonable support for it.