[webkit-dev] Canvas path closure on stroke vs fill operations

Brian R. Bogovich bbogovich at tdc-group.com
Wed May 17 07:14:22 PDT 2006

*If this is the incorrect mailing list for this topic, please let me know.
*Note: this is a  follow-up to a discussion at

I've been troubleshooting some discrepancies between the Safari, Mozilla and
Internet Explorer (Google) implementations of the canvas element.  There
seems to be some difference of opinion on when a path should be implicitly
closed by stroke and fill operations.  Since WebKit/Safari is the
authoritative implementation, I would like to get the opinion of the webkit
developers on this matter.

The WHAT-WG draft specification for canvas states that fill operations
implicitly close the open subpath.  The stroke method does not, however.
This seems to imply that if a stroke method is called, the current path will
still be available for future operations such as fill.

Excerpt from http://www.whatwg.org/specs/web-apps/current-work/
"The fill() method fills each subpath of the current path in turn, using
fillStyle, and using the non-zero winding number rule. Open subpaths are
implicitly closed when being filled (without affecting the actual subpaths).

The stroke() method strokes each subpath of the current path in turn, using
the strokeStyle, lineWidth, lineJoin, and (if appropriate) miterLimit

The documentation at developer.apple.com is consistent with the
specification, although the implicit close is not mentioned in the fill
method.  It is, however, discussed in the documentation of the closePath
method.  This would seem to indicate that a path will be closed by the
closePath and fill methods, but will not be closed by the stroke method.

Excerpt from
"Closes and terminates an open subpath.


When a subpath is open and you call this method, the canvas closes the
subpath (draws a straight line that connects the current point to the
starting point), and terminates the subpath (the current point is no longer

If no subpath is open, calling this method does nothing.

Note: You can stroke along an open subpath. When a subpath is open and you
fill or clip, however, the canvas implicitly closes the subpath for you."

Safari and Internet Explorer (using explorerCanvas from Google) close the
current path for both the stroke and fill methods.  This appears to be
inconsistent with the draft specification, which indicates that the stroke
method should not close the path.  Firefox 1.5 leaves the current path open
during a stroke operation but closes the path in the fill method.  This
would appear to be a more correct behavior.

Is this behavior in Safari intentional?  If so, should the Firefox
implementation be modified to close paths on both the stroke and fill
methods?  Both methods are acceptable, but the differences in implementation
can currently result in pages which behave differently between browsers.

Thanks for all your work implementating and popularizing the canvas, finally
having a common client-side drawing API for web applications is very


Brian R. Bogovich
Application Developer
TDC Group Inc
bbogovich at tdc-group.com Email
www.tdc-group.com URL

More information about the webkit-dev mailing list