Bug 80674 - Compat issues <canvas> strokes with dash and dashOffset
Summary: Compat issues <canvas> strokes with dash and dashOffset
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: noel gordon
URL: https://www.w3.org/Bugs/Public/show_b...
Keywords:
Depends on:
Blocks:
 
Reported: 2012-03-08 21:07 PST by noel gordon
Modified: 2014-04-11 03:10 PDT (History)
5 users (show)

See Also:


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 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 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 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 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 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 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 Details | Formatted Diff | Diff
Patch: test angular line dash with line-joins (141.30 KB, patch)
2012-03-11 19:06 PDT, noel gordon
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description noel gordon 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 noel gordon 2012-03-08 21:08:42 PST
Created attachment 130968 [details]
complex paths and line joins
Comment 2 noel gordon 2012-03-08 21:14:17 PST
Created attachment 130969 [details]
Results on 10.6 mac-osx -- chrome 19 dev, firefox 10.0.2, safari 5.1.2
Comment 3 noel gordon 2012-03-08 21:17:04 PST
Created attachment 130971 [details]
Results on win7 -- chrome 19 dev, firefox 10.0.2, safari 5.1.2, internet explorer 9
Comment 4 noel gordon 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 noel gordon 2012-03-08 22:40:42 PST
Created attachment 130984 [details]
Patch: v8 bindings
Comment 6 noel gordon 2012-03-08 23:03:38 PST
Created attachment 130985 [details]
Patch: test simple line dash and dash offsets
Comment 7 noel gordon 2012-03-08 23:16:49 PST
Created attachment 130988 [details]
Patch: test line dash and line-width
Comment 8 noel gordon 2012-03-08 23:29:30 PST
Created attachment 130990 [details]
Patch: test line dash and line-joins
Comment 9 noel gordon 2012-03-08 23:41:45 PST
Created attachment 130991 [details]
Patch: test line dash and complex path line-joins
Comment 10 noel gordon 2012-03-08 23:46:18 PST
Created attachment 130992 [details]
Patch: test line dash with gradient stroke style
Comment 11 noel gordon 2012-03-08 23:52:26 PST
Created attachment 130994 [details]
Patch: test line dash with shaped path (circles)
Comment 12 noel gordon 2012-03-11 19:06:05 PDT
Created attachment 131269 [details]
Patch: test angular line dash with line-joins
Comment 13 noel gordon 2012-03-11 20:01:18 PDT
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 Ian 'Hixie' Hickson 2012-03-28 14:48:17 PDT
HTML spec has been updated with an API for this.
Comment 15 Dirk Schulze 2014-04-03 06:37:18 PDT
Not sure why this is still open. Seems to be fixed with the exception of issue in bug 80560. Closing bug.
Comment 16 noel gordon 2014-04-03 18:01:37 PDT
WebKit has implemented the dash-stroke API Ian added per #14 ?
Comment 17 Dirk Schulze 2014-04-04 00:44:44 PDT
(In reply to comment #16)
> WebKit has implemented the dash-stroke API Ian added per #14 ?

yes
Comment 18 noel gordon 2014-04-10 22:38:50 PDT
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 Dirk Schulze 2014-04-11 01:17:20 PDT
(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 noel gordon 2014-04-11 03:10:33 PDT
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