1

I have made a bezier curve using html5 canvas and I'm wondering if it's possible to make it dashed? My code is:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 2;
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(-200, 350);
ctx.bezierCurveTo(199, 604, 220, 180, 500, 350);
ctx.stroke();

I have created a jsfiddle here

This is the first time I'm using html5 canvas so my skills with it aren't that great at this point. Thanks in advance.

user1845661
  • 127
  • 1
  • 2
  • 7

2 Answers2

3

For Chrome you can use:

context.setLineDash([2,3,...]);  //pattern, can be more than 2 entries
context.lineDashOffset(0);       //start point (ie. walking ants)
context.getLineDash();

For Firefox you can use:

context.mozDash = [2,3,...];     //prefixed for Mozilla at this time
context.mozDashOffset = 0;

A generic function:

function setDash(context, array, offset) {

    offset = (typeof offset === 'number') ? offset : 0;

    if (typeof context.setLineDash === 'undefined') { //Firefox
        context.mozDash = array;
        context.mozDashOffset = offset;

    }
    else { //Chrome
        context.setLineDash(array);
        context.lineDashOffset = offset
    }
}

Walking ants demo (from the archive - works in both Firefox and Chrome):
http://jsfiddle.net/AbdiasSoftware/Mnc94/

  • You probably meant "Walking Ants", not "Waking Ants" ! – Lee Taylor Jun 24 '13 at 22:30
  • @markE should be `mozDash` (sorry, my bad.. my attention was directed to a more important (?) typo) :o] –  Jun 24 '13 at 22:50
  • @Ken - Abdias Software Thanks for your help. I'd up-vote for you but my reputation isn't high enough yet. Thanks a lot. – user1845661 Jun 24 '13 at 23:27
  • You got it backwards. setLineDash should be undefined, not "not undefined". – Agamemnus May 15 '14 at 05:01
  • Another one... I'm not sure-- but maybe it changed since you posted, but it should be "context.lineDashOffset = offset". – Agamemnus May 16 '14 at 03:03
  • @Agamemnus yeah, dash has been a bit experimental and none has followed a consistent path until recent. Hard to keep track of all these subtle changes.. (it's like Path changed name to Path2D of a sudden etc.). OR maybe I was just dizzy at the time..I'll check it out closer and update. Thanks. –  May 16 '14 at 03:08
1

Since January 2013, you can do this in Chrome with ctx.setLineDash([2,3]); where 2 is the stroke in pixels and 3 is the space in pixels.

However other browsers does not implement this yet (Firefox, IE10, Safari, Opera). This is a future simplification not yet in place. Mozilla has an experimental version mozDash but I have not tested that.

I recommend you implement a check around this, so if this method exists the line appears dashed, otherwise not - but that is assuming that a line is better than no line. The alternative is to implement your own curve drawing of this by calculating arc lengths and turning on and off stroke. See answer here for that: Dashed Curves on Html5 Canvas Bezier

Community
  • 1
  • 1
krembanan
  • 1,408
  • 12
  • 28
  • That makes my whole curve disappear. Did I do it right? [see the updated jsfiddle](http://jsfiddle.net/sw6vx/5/) – user1845661 Jun 24 '13 at 21:14
  • setLineDash promises to make "dashing" so much easier than before, but...Warning: This is a new feature and does not exist in many browsers (Chrome-yes, most others-no) – markE Jun 24 '13 at 22:29
  • @user1845661 I corrected my answer. I foolishly believed that a function available in Chrome for over 6 months would have "trickled" down to at least Firefox. – krembanan Jun 25 '13 at 05:41