Bug 80674 - Compat issues <canvas> strokes with dash and dashOffset
: Compat issues <canvas> strokes with dash and dashOffset
Status: RESOLVED FIXED
: WebKit
Canvas
: 528+ (Nightly build)
: Unspecified Unspecified
: P2 Normal
Assigned To:
: https://www.w3.org/Bugs/Public/show_b...
:
:
:
  Show dependency treegraph
 
Reported: 2012-03-08 21:07 PST by
Modified: 2014-04-11 03:10 PST (History)


Attachments
complex paths and line joins (901 bytes, image/svg+xml)
2012-03-08 21:08 PST, noel gordon
no flags Details
Results on 10.6 mac-osx -- chrome 19 dev, firefox 10.0.2, safari 5.1.2 (155.87 KB, image/png)
2012-03-08 21:14 PST, noel gordon
no flags Details
Results on win7 -- chrome 19 dev, firefox 10.0.2, safari 5.1.2, internet explorer 9 (209.75 KB, image/png)
2012-03-08 21:17 PST, noel gordon
no flags Details
Patch: v8 bindings (5.30 KB, patch)
2012-03-08 22:40 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff
Patch: test simple line dash and dash offsets (28.72 KB, patch)
2012-03-08 23:03 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff
Patch: test line dash and line-width (207.81 KB, patch)
2012-03-08 23:16 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff
Patch: test line dash and line-joins (93.82 KB, patch)
2012-03-08 23:29 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff
Patch: test line dash and complex path line-joins (120.07 KB, patch)
2012-03-08 23:41 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff
Patch: test line dash with gradient stroke style (89.41 KB, patch)
2012-03-08 23:46 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff
Patch: test line dash with shaped path (circles) (152.03 KB, patch)
2012-03-08 23:52 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff
Patch: test angular line dash with line-joins (141.30 KB, patch)
2012-03-11 19:06 PST, noel gordon
no flags Review Patch | Details | Formatted Diff | Diff


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2012-03-08 21:07:56 PST
Bug 63933 introduced dashed lines support for the <canvas> element.  No tests pixel were added, no V8 bindings.

Chrome bindings would be simple, and would route to the GraphicsContext line stroker used for SVG dashed paths.  For simple lines paths compat b/w browsers is reasonable.  However, for complex paths, the interaction of line-joins and path shapes lead to interesting compat issues.  knots.svg attached.
------- Comment #1 From 2012-03-08 21:08:42 PST -------
Created an attachment (id=130968) [details]
complex paths and line joins
------- Comment #2 From 2012-03-08 21:14:17 PST -------
Created an attachment (id=130969) [details]
Results on 10.6 mac-osx -- chrome 19 dev, firefox 10.0.2, safari 5.1.2
------- Comment #3 From 2012-03-08 21:17:04 PST -------
Created an attachment (id=130971) [details]
Results on win7 -- chrome 19 dev, firefox 10.0.2, safari 5.1.2, internet explorer 9
------- Comment #4 From 2012-03-08 21:36:20 PST -------
The differences in the SVG line-join implementations are clear.  Some are bugs, but the required behavior is unspecified in SVG, best I can tell.  <canvas> dashed lines would exhibit these same "line-join effects".
------- Comment #5 From 2012-03-08 22:40:42 PST -------
Created an attachment (id=130984) [details]
Patch: v8 bindings
------- Comment #6 From 2012-03-08 23:03:38 PST -------
Created an attachment (id=130985) [details]
Patch: test simple line dash and dash offsets
------- Comment #7 From 2012-03-08 23:16:49 PST -------
Created an attachment (id=130988) [details]
Patch: test line dash and line-width
------- Comment #8 From 2012-03-08 23:29:30 PST -------
Created an attachment (id=130990) [details]
Patch: test line dash and line-joins
------- Comment #9 From 2012-03-08 23:41:45 PST -------
Created an attachment (id=130991) [details]
Patch: test line dash and complex path line-joins
------- Comment #10 From 2012-03-08 23:46:18 PST -------
Created an attachment (id=130992) [details]
Patch: test line dash with gradient stroke style
------- Comment #11 From 2012-03-08 23:52:26 PST -------
Created an attachment (id=130994) [details]
Patch: test line dash with shaped path (circles)
------- Comment #12 From 2012-03-11 19:06:05 PST -------
Created an attachment (id=131269) [details]
Patch: test angular line dash with line-joins
------- Comment #13 From 2012-03-11 20:01:18 PST -------
http://www.w3.org/TR/SVGTiny12/painting.html#StrokeDasharrayProperty contains a note about the compat issues wrt stroke-dasharray, and my test results confirm it.
------- Comment #14 From 2012-03-28 14:48:17 PST -------
HTML spec has been updated with an API for this.
------- Comment #15 From 2014-04-03 06:37:18 PST -------
Not sure why this is still open. Seems to be fixed with the exception of issue in bug 80560. Closing bug.
------- Comment #16 From 2014-04-03 18:01:37 PST -------
WebKit has implemented the dash-stroke API Ian added per #14 ?
------- Comment #17 From 2014-04-04 00:44:44 PST -------
(In reply to comment #16)
> WebKit has implemented the dash-stroke API Ian added per #14 ?

yes
------- Comment #18 From 2014-04-10 22:38:50 PST -------
Meant how stroke depends the trace-a-path-algorithm [1] and the dash-list. 

[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#trace-a-path
------- Comment #19 From 2014-04-11 01:17:20 PST -------
(In reply to comment #18)
> Meant how stroke depends the trace-a-path-algorithm [1] and the dash-list. 
> 
> [1] http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#trace-a-path

Implementations rely on the behavior of graphic libraries which are mostly based on the rendering of PDF. I do not see any need to follow the text in the canvas part of the specification. This makes the results likely less interoperable across other formats as for example SVG and the browser slower.
------- Comment #20 From 2014-04-11 03:10:33 PST -------
Can be interoperable by relying on graphics library behavior?

Based on SVGTiny1.2's 'stroke-dasharray' note about the incompatibilities caused by graphics libraries, #13 and [1], one SVG 2.0 goal is to define stroke-dash behavior, regardless of graphics library [2].  Why bother?

[1] https://www.w3.org/Graphics/SVG/WG/track/issues/2191
[2] https://svgwg.org/svg2-draft/single-page.html#painting-TermDashPositions