0

I am experimenting with HTML5 Canvas for the first time, as I need to create a curved path which would look something like this:

enter image description here

Now what the image shows is in the first case, it's just a solid stroke path comprised of a couple of bezier curves. What I'd like to achieve is to make the path dotted in some way, and then have a certain portion of the path highlighted to illustrate progress along a path (this is for a game).

Aside from doing the mathematics for bezier bisection, plotting points along a path which I mathematically calculate (and I've read some papers which seem to show how to do this efficiently, but it seems like an overkill), I was wondering if there is some simple way to achieve this effect. Thanks!

Edit: I found this answer, dotted stroke in <canvas> but it doesn't exactly address the more complicated case I have in mind with Bezier curves. A straight line version of this would be really easy to pull off :)

Edit: Should work in IE as well

Community
  • 1
  • 1
capcom
  • 525
  • 7
  • 16
  • @Roberto Very interesting, but two issues: I can't partially fill the path with one color still as the animation is only a result of shifting the start and end points of the curve, and I need IE support (the correct answer there doesn't lead in a direction for IE support sadly). – capcom Apr 15 '16 at 18:11

1 Answers1

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: The second curve (the light colored path) must start where the first path left off - in this case, that's 400, 150.

Timothy Kanski
  • 1,861
  • 14
  • 20
  • Definitely a helpful reference! My concern is that my path is a combination of many bezier curves and not a spiral defined by one function. If I could define my path by a single relatively simple function (in my case it's piecewise even), then this would be a simpler problem. Does that make sense? – capcom Apr 15 '16 at 18:10
  • How are you currently drawing the path? or have you made it that far? – Timothy Kanski Apr 15 '16 at 18:13
  • I am essentially following this tutorial exactly to build a sample path: http://www.html5canvastutorials.com/tutorials/html5-canvas-paths/ – capcom Apr 15 '16 at 19:18
  • Edited answer. is this what you need? – Timothy Kanski Apr 15 '16 at 19:48
  • Wow yes! Very close. I didn't know about the setlLineDash function. Would it be too much for me to ask if you know how I could color, say the first half of the path, differently from the rest? – capcom Apr 15 '16 at 20:42
  • Edited again. It doesn't seem like you can one Bezier Curve into multiple colors, but you could connect two of different colors. Since you seem to want the second color to be a faded version of the first, an alternative to my latest edit could be to put an opaque mask over part of the path. – Timothy Kanski Apr 15 '16 at 21:01
  • Thanks, closest answer, though what ended up helping me most was http://stackoverflow.com/questions/25442709/draw-html5-javascript-canvas-path-in-time – capcom Apr 17 '16 at 20:21