HTML5 Canvas, équidistants points suivant un chemin

Question

J'expérimente avec HTML5 Canvas pour la première fois, comme je l'ai besoin de créer un chemin courbe qui ressemblerait à quelque chose comme ceci:

Maintenant que la l'image montre est dans le premier cas, c'est juste un chemin de course solide composé de quelques courbes bezier. Ce que je voudrais accomplir est de faire en sorte que le chemin soit pointé d'une manière ou d'une autre, et ensuite mettre en évidence une certaine partie du chemin pour illustrer le progrès le long d'un chemin (c'est pour un jeu). Mis à part faire les mathématiques pour la bissection bezier, tracer des points le long d'un chemin que je calcule mathématiquement (et j'ai lu quelques documents qui semblent montrer comment le faire efficacement, mais cela semble être une surcharge), j'étais Je me demande s'il existe un moyen simple d'obtenir cet effet. Merci!

Editer: J'ai trouvé cette réponse, dotted stroke in <canvas> mais elle ne répond pas exactement au cas plus complexe que j'ai à l'esprit avec les courbes de Bézier. Une version en ligne droite de ce serait vraiment facile à retirer :)

Edit: Si le travail dans IE et

Answer 1

https://jsfiddle.net/9m8wo0ef/2/

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    context.setLineDash([5, 15]); 

    context.beginPath(); 
    context.moveTo(100, 20); 

    // bezier curve 
    context.bezierCurveTo(290, -40, 300, 200, 400, 150); 

    context.lineWidth = 5; 
    context.strokeStyle = 'blue'; 
    context.stroke(); 

    // second half of curve 
    context.beginPath(); 
    context.strokeStyle="#DDDDFF"; 
    context.bezierCurveTo(400, 150, 500, 120, 450, 20); 
    context.stroke(); 

Note: La seconde courbe (la chemin de couleur claire) doit commencer où le premier chemin s'est arrêté - dans ce cas, c'est 400, 150.