Bug 80674

Summary:

Compat issues <canvas> strokes with dash and dashOffset

Product:

WebKit

Reporter:

noel gordon <noel.gordon>

Component:

Canvas

Assignee:

noel gordon <noel.gordon>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

dino, eoconnor, ian, krit, webkit

Priority:

Version:

528+ (Nightly build)

Hardware:

Unspecified

OS:

Unspecified

URL:

https://www.w3.org/Bugs/Public/show_bug.cgi?id=9301

Attachments:

Description	Flags
complex paths and line joins	none
Results on 10.6 mac-osx -- chrome 19 dev, firefox 10.0.2, safari 5.1.2	none
Results on win7 -- chrome 19 dev, firefox 10.0.2, safari 5.1.2, internet explorer 9	none
Patch: v8 bindings	none
Patch: test simple line dash and dash offsets	none
Patch: test line dash and line-width	none
Patch: test line dash and line-joins	none
Patch: test line dash and complex path line-joins	none
Patch: test line dash with gradient stroke style	none
Patch: test line dash with shaped path (circles)	none
Patch: test angular line dash with line-joins	none

noel gordon

Reported 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.

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
View All Add attachment proposed patch, testcase, etc.

noel gordon

Comment 1 2012-03-08 21:08:42 PST

Created attachment 130968 [details] complex paths and line joins

noel gordon

Comment 2 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

noel gordon

Comment 3 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

noel gordon

Comment 4 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".

noel gordon

Comment 5 2012-03-08 22:40:42 PST

Created attachment 130984 [details] Patch: v8 bindings

noel gordon

Comment 6 2012-03-08 23:03:38 PST

Created attachment 130985 [details] Patch: test simple line dash and dash offsets

noel gordon

Comment 7 2012-03-08 23:16:49 PST

Created attachment 130988 [details] Patch: test line dash and line-width

noel gordon

Comment 8 2012-03-08 23:29:30 PST

Created attachment 130990 [details] Patch: test line dash and line-joins

noel gordon

Comment 9 2012-03-08 23:41:45 PST

Created attachment 130991 [details] Patch: test line dash and complex path line-joins

noel gordon

Comment 10 2012-03-08 23:46:18 PST

Created attachment 130992 [details] Patch: test line dash with gradient stroke style

noel gordon

Comment 11 2012-03-08 23:52:26 PST

Created attachment 130994 [details] Patch: test line dash with shaped path (circles)

noel gordon

Comment 12 2012-03-11 19:06:05 PDT

Created attachment 131269 [details] Patch: test angular line dash with line-joins

noel gordon

Comment 13 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.

Ian 'Hixie' Hickson

Comment 14 2012-03-28 14:48:17 PDT

HTML spec has been updated with an API for this.

Dirk Schulze

Comment 15 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.

noel gordon

Comment 16 2014-04-03 18:01:37 PDT

WebKit has implemented the dash-stroke API Ian added per #14 ?

Dirk Schulze

Comment 17 2014-04-04 00:44:44 PDT

(In reply to comment #16) > WebKit has implemented the dash-stroke API Ian added per #14 ? yes

noel gordon

Comment 18 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

Dirk Schulze

Comment 19 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.

noel gordon

Comment 20 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

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