From gabelerner@gmail.com on August 12, 2010 22:12:40

Since most of the stroke styles are supported, I assume you mean support stroke-dasharray and stroke-dashoffset attributes ( http://www.w3.org/TR/SVG/painting.html#StrokeProperties ).

Canvas doesn't natively support dashed paths yet (but might in the future http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-May/011224.html ) so this will be on hold for now. One thing to eventually try is integrating the code from https://code.google.com/p/canviz/source/browse/path/trunk/ as they do it computationally. I'd also get proper path bounding boxes from this and potentially fix Issue 48 and Issue 50 .

Status: Accepted
Labels: -Type-Defect -Priority-Medium Type-Enhancement Priority-Low

From leeon...@gmail.com on August 24, 2011 07:31:08

until it's specced officially https://bugzilla.mozilla.org/show_bug.cgi?id=662038 at least a straight-line implementation can be lifted here:
src: http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas demo: http://phrogz.net/tmp/canvas_dashed_line.html

From gabelerner@gmail.com on January 08, 2012 16:09:38

Issue 123 has been merged into this issue.

From r...@b-online.nl on March 19, 2012 06:08:35

Also vsGraphCtx1v08.js uses a computed solution.

For a native support (webkit/gecko), try adding the following to the renderChildren function:

if (ctx.strokeStyle != '') {
if (this.style('stroke-dasharray').hasValue()) {
var dashGapArray = this.style('stroke-dasharray').value.split(',');
if (dashGapArray.length>1 && dashGapArray[0]>0){
var lengths = [parseInt(dashGapArray[0]),parseInt(dashGapArray[1])];
if (navigator.userAgent.indexOf('Gecko/') != -1) {
ctx.mozDash = lengths;
ctx.mozDashOffset = 2;
} else if (navigator.userAgent.indexOf("WebKit") >= 0) {
ctx.webkitLineDash = lengths;
ctx.webkitLineDashOffset = 2;
}
}
}
ctx.stroke();
}

For use in combination with svgcanvas you can disable the 'filled line' alert in supported browsers, like this:
$.each(issue_list, function(sel, descr) {
if(sel=='[stroke-dasharray]' && (navigator.userAgent.indexOf('Gecko/') != -1 || isWebkit)) return;
if(content.find(sel).length) {
issues.push(descr);
}
});

From gabelerner@gmail.com on March 27, 2012 08:28:44

Status: Started

From san.ag...@gmail.com on July 16, 2012 15:19:18

Hey,

I am working on project where we had to modify your code to accomodate stroke-dasharray functionality. I am attaching the file for your review. We modified the svg.element.line to check for the stroke-dasharray style and displaying it differently using code mentioned by Rod MacDougall at. http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas .

Attachment: canvg.js

From gabelerner@gmail.com on July 16, 2012 15:30:07

Thanks to everybody that replied. Will merge your solutions in at some point!

From gabelerner@gmail.com on November 03, 2012 13:32:01

Issue 142 has been merged into this issue.

From dsand...@rapilabs.com on January 26, 2013 08:38:25

Whereabouts should I add the patch from comment #6 to enable stroke-dasharray for path elements?

From dsand...@rapilabs.com on January 30, 2013 05:50:38

It's important to know that Chrome supports ctx.setLineDash() and ctx.lineDashOffset [1] as specified in the W3C standard [2] however Firefox still uses mozDash/mozDashOffset [3]

[1] https://code.google.com/p/chromium/issues/detail?id=112145#c20 [2] http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#conformance-requirements [3] http://bugzilla.mozilla.org/show_bug.cgi?id=768067

From gabelerner@gmail.com on May 07, 2013 21:07:22

(finally) fixed by r169

Status: Fixed