Stroke-dash interpolation using canvas in D3.js -

i'm wondering canvas-based implementation of mike bostock's svg-based stroke-dash interpolation method. gather 1 of canvas's differences svg since "once shape drawn, there no way modify or style it" (from roger veciana rovira). method in principle canvas can support, or wasting time?

if possible, pointers appreciated.

thanks in advance.

the short answer yes, can this, wouldn't want to. longer answer it's more complicated in svg -- can't use same techniques, because relies on things aren't present in canvas.

when going away svg, lose d3 offers (and that's offered svg itself), such line generators, interpolation , stroke-dasharray attributes. i've made simplistic (and not d3) example of animating path here. can see basic technique, more sophisticated (e.g. animated drawing of individual paths) have create own interpolator gives sequence of points along path , draw explicitly one-by-one onto canvas. , that's simple linear interpolations.

so reproduce above example in canvas, need implement function interpolates path cardinal spline between points , allows position of each point along line , pass settimeout function draws each point after small delay give illusion line drawn smoothly. dashed line @ start, similar except have dashes instead of points.

you reuse parts of implementation of d3's svg line generator that, still quite effort.