- From: Janina Sajka <janina@rednote.net>
- Date: Thu, 27 Oct 2011 20:38:03 -0400
- To: Richard Schwerdtfeger <schwer@us.ibm.com>
- Cc: franko@microsoft.com, chucko@jumis.com, jonas@sicking.cc, david.bolter@gmail.com, cyns@exchange.microsoft.com, public-html-a11y@w3.org, jbrewer@w3.org, public-canvas-api@w3.org, Deborah Dahl <dahl@conversational-technologies.com>
Richard Schwerdtfeger writes:
>
> ... Janina please put a link to this
> document in your canvas agenda for TPAC.
>
That will be Monday in our HTML Issues segment at
15:30-17:00
Note also that MMI is joining us immediately following, from 17:00-18:00.
Among other things, they want to point us to some work on InkML in
Canvas. Here's an excerpt from an email I received from Debbie Dahl
about that:
Date: Fri, 23 Sep 2011 11:00:24 -0400
From: Deborah Dahl <dahl@conversational-technologies.com>
As we discussed in the HCG call today, this is a link to the open source
JavaScript InkML library, which was developed by Tom Underhill at
Microsoft,
one of the InkML editors -- http://inkml.codeplex.com/
> See you all in California.
>
California, here we come!
Janina
> Rich Schwerdtfeger
> [1]W3C
>
> HTML Canvas 2D Context
>
> W3C Working Draft 24 May 2011
>
> This Version:
> [2]http://www.w3.org/TR/2011/LC-2dcontext-20110524/
>
> Latest Published Version:
> [3]http://www.w3.org/TR/2dcontext/
>
> Latest Editor's Draft:
> [4]http://dev.w3.org/html5/2dcontext/
>
> Previous Versions:
> [5]http://www.w3.org/TR/2011/WD-2dcontext-20110405/
> [6]http://www.w3.org/TR/2011/WD-2dcontext-20110113/
> [7]http://www.w3.org/TR/2010/WD-2dcontext-20101019/
> [8]http://www.w3.org/TR/2010/WD-2dcontext-20100624/
> [9]http://www.w3.org/TR/2010/WD-2dcontext-20100304/
> [10]http://www.w3.org/TR/2009/WD-html5-20090825/
> [11]http://www.w3.org/TR/2009/WD-html5-20090423/
> [12]http://www.w3.org/TR/2009/WD-html5-20090212/
> [13]http://www.w3.org/TR/2008/WD-html5-20080610/
> [14]http://www.w3.org/TR/2008/WD-html5-20080122/
>
> Editor:
> [15]Ian Hickson, Google, Inc.
>
> [16]Copyright © 2010 [17]W3C^® ([18]MIT, [19]ERCIM, [20]Keio), All
> Rights Reserved. W3C [21]liability, [22]trademark and [23]document use
> rules apply.
>
> The bulk of the text of this specification is also available in the
> WHATWG [24]Web Applications 1.0 specification, under a license that
> permits reuse of the specification text.
> __________________________________________________________________
>
> Abstract
>
> This specification defines the 2D Context for the HTML canvas element.
>
> Status of This document
>
> This section describes the status of this document at the time of its
> publication. Other documents may supersede this document. A list of
> current W3C publications and the most recently formally published
> revision of this technical report can be found in the [25]W3C technical
> reports index at http://www.w3.org/TR/.
>
> If you wish to make comments regarding this document in a manner that
> is tracked by the W3C, please submit them via using [26]our public bug
> database. If you do not have an account then you can enter feedback
> using this form:
>
> Feedback Comments
>
> Please enter your feedback, carefully indicating the title of the
> section for which you are submitting feedback, quoting the text that's
> wrong today if appropriate. If you're suggesting a new feature, it's
> really important to say what the problem you're trying to solve is.
> That's more important than the solution, in fact.
>
>
> [27]___________________________________________________________
> [28]___________________________________________________________
> [29]___________________________________________________________
> [30]___________________________________________________________
> [31]___________________________________________________________
> [32]___________________________________________________________
> [33]___________________________________________________________
> [34]___________________________________________________________
> [35]___________________________________________________________
> [36]___________________________________________________________
>
> Please don't use section numbers as these tend to change rapidly and
> make your feedback harder to understand.
>
> [37]Submit feedback(Note: Your IP address and user agent will be
> publicly recorded for spam prevention purposes.)
>
> If you cannot do this then you can also e-mail feedback to
> [38]public-html-comments@w3.org ([39]subscribe, [40]archives), and
> arrangements will be made to transpose the comments to our public bug
> database. Alternatively, you can e-mail feedback to
> [41]whatwg@whatwg.org ([42]subscribe, [43]archives). The editor
> guarantees that all substantive feedback sent to this list will receive
> a reply. However, such feedback is not considered formal feedback for
> the W3C process. All feedback is welcome.
>
> The working groups maintains [44]a list of all bug reports that the
> editor has not yet tried to address and [45]a list of issues for which
> the chairs have not yet declared a decision. The editor also maintains
> [46]a list of all e-mails that he has not yet tried to address. These
> bugs, issues, and e-mails apply to multiple HTML-related
> specifications, not just this one.
>
> Implementors should be aware that this specification is not stable.
> Implementors who are not taking part in the discussions are likely to
> find the specification changing out from under them in incompatible
> ways. Vendors interested in implementing this specification before it
> eventually reaches the Candidate Recommendation stage should join the
> aforementioned mailing lists and take part in the discussions.
>
> The publication of this document by the W3C as a W3C Working Draft does
> not imply that all of the participants in the W3C HTML working group
> endorse the contents of the specification. Indeed, for any section of
> the specification, one can usually find many members of the working
> group or of the W3C as a whole who object strongly to the current text,
> the existence of the section at all, or the idea that the working group
> should even spend time discussing the concept of that section.
>
> The latest stable version of the editor's draft of this specification
> is always available on [47]the W3C CVS server and in the [48]WHATWG
> Subversion repository. The [49]latest editor's working copy (which may
> contain unfinished text in the process of being prepared) contains the
> latest draft text of this specification (amongst others). For more
> details, please see the [50]WHATWG FAQ.
>
> There are various ways to follow the change history for the HTML
> specifications:
>
> E-mail notifications of changes
> HTML-Diffs mailing list (diff-marked HTML versions for each
> change):
> [51]http://lists.w3.org/Archives/Public/public-html-diffs/latest
> Commit-Watchers mailing list (complete source diffs):
> [52]http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.
> org
>
> Real-time notifications of changes:
> Generated diff-marked HTML versions for each change:
> [53]http://twitter.com/HTML5
>
> Browsable version-control record of all changes:
> CVSWeb interface with side-by-side diffs:
> [54]http://dev.w3.org/cvsweb/html5/
> Annotated summary with unified diffs:
> [55]http://html5.org/tools/web-apps-tracker
> Raw Subversion interface: svn checkout
> http://svn.whatwg.org/webapps/
>
> The W3C [56]HTML Working Group is the W3C working group responsible for
> this specification's progress along the W3C Recommendation track. This
> specification is the 24 May 2011 Working Draft.
>
> Work on this specification is also done at the [57]WHATWG. The W3C HTML
> working group actively pursues convergence with the WHATWG, as required
> by the [58]W3C HTML working group charter.
>
> This specification is an extension to the HTML5 language. All normative
> content in the HTML5 specification, unless specifically overridden by
> this specification, is intended to be the basis for this specification.
>
> This document was produced by a group operating under the [59]5
> February 2004 W3C Patent Policy. W3C maintains a [60]public list of any
> patent disclosures made in connection with the deliverables of the
> group; that page also includes instructions for disclosing a patent. An
> individual who has actual knowledge of a patent which the individual
> believes contains [61]Essential Claim(s) must disclose the information
> in accordance with [62]section 6 of the W3C Patent Policy.
>
> Table of Contents
>
> 1. [63]1 Conformance requirements
> 2. [64]2 The canvas state
> 3. [65]3 Transformations
> 4. [66]4 Compositing
> 5. [67]5 Colors and styles
> 6. [68]6 Line styles
> 7. [69]7 Shadows
> 8. [70]8 Simple shapes (rectangles)
> 9. [71]9 Complex shapes (paths)
> 10. [72]10 Focus management
> 11. [73]11 Caret and selection managment
> 12. [74]12 Text
> 13. [75]13 Images
> 14. [76]14 Pixel manipulation
> 15. [77]15 Drawing model
> 16. [78]16 Active Regions and Hit Testing
> 17. [79]17 Examples
> 18. [80]References
> 19. [81]Acknowledgements
> __________________________________________________________________
>
> 1 Conformance requirements
>
> This specification is an HTML specification. All the conformance
> requirements, conformance classes, definitions, dependencies,
> terminology, and typographical conventions described in the core HTML5
> specification apply to this specification. [82][HTML5]
>
> Interfaces are defined in terms of Web IDL. [83][WEBIDL]
>
> This specification defines the 2d context type, whose API is
> implemented using the [84]CanvasRenderingContext2D interface.
>
> When the getContext() method of a canvas element is to return a new
> object for the contextId [85]2d, the user agent must return a new
> [86]CanvasRenderingContext2D object. Any additional arguments are
> ignored.
>
> The 2D context represents a flat Cartesian surface whose origin (0,0)
> is at the top left corner, with the coordinate space having x values
> increasing when going right, and y values increasing when going down.
> interface CanvasRenderingContext2D {
>
> // back-reference to the canvas
> readonly attribute HTMLCanvasElement [87]canvas;
>
> // state
> void [88]save(); // push state on state stack
> void [89]restore(); // pop state stack and restore state
> // transformations (default transform is the identity matrix)
> void [90]scale(in double x, in double y);
> void [91]rotate(in double angle);
> void [92]translate(in double x, in double y);
> void [93]transform(in double a, in double b, in double c, in double d, in doub
> le e, in double f);
> void [94]setTransform(in double a, in double b, in double c, in double d, in d
> ouble e, in double f);
> // compositing
> attribute double [95]globalAlpha; // (default 1.0)
> attribute DOMString [96]globalCompositeOperation; // (default source-
> over)
> // colors and styles
> attribute any [97]strokeStyle; // (default black)
> attribute any [98]fillStyle; // (default black)
> [99]CanvasGradient [100]createLinearGradient(in double x0, in double y0, in do
> uble x1, in double y1);
> [101]CanvasGradient [102]createRadialGradient(in double x0, in double y0, in d
> ouble r0, in double x1, in double y1, in double r1);
> [103]CanvasPattern [104]createPattern(in HTMLImageElement image, in DOMString
> repetition);
> [105]CanvasPattern [106]createPattern(in HTMLCanvasElement image, in DOMString
> repetition);
> [107]CanvasPattern [108]createPattern(in HTMLVideoElement image, in DOMString
> repetition);
>
> // line caps/joins
> attribute double [109]lineWidth; // (default 1)
> attribute DOMString [110]lineCap; // "butt", "round", "square" (defau
> lt "butt")
> attribute DOMString [111]lineJoin; // "round", "bevel", "miter" (defa
> ult "miter")
> attribute double [112]miterLimit; // (default 10)
>
> // shadows
> attribute double [113]shadowOffsetX; // (default 0)
> attribute double [114]shadowOffsetY; // (default 0)
> attribute double [115]shadowBlur; // (default 0)
> attribute DOMString [116]shadowColor; // (default transparent black)
>
> // rects
> void [117]clearRect(in double x, in double y, in double w, in double h);
> void [118]fillRect(in double x, in double y, in double w, in double h);
> void [119]strokeRect(in double x, in double y, in double w, in double h);
>
> // path API
> void [120]beginPath();
> void [121]closePath();
> void [122]moveTo(in double x, in double y);
> void [123]lineTo(in double x, in double y);
> void [124]quadraticCurveTo(in double cpx, in double cpy, in double x, in doubl
> e y);
> void [125]bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in dou
> ble cp2y, in double x, in double y);
> void [126]arcTo(in double x1, in double y1, in double x2, in double y2, in dou
> ble radius);
> void [127]rect(in double x, in double y, in double w, in double h);
> void [128]arc(in double x, in double y, in double radius, in double startAngle
> , in double endAngle, in optional boolean anticlockwise);
> void [129]fill();
> void [130]stroke();
> void [131]clip();
> boolean [132]isPointInPath(in double x, in double y);
>
> // Focus management
> boolean [133]drawSystemFocusRing(in Element element);
> boolean [134]drawCustomFocusRing(in Element element);
>
> // Caret and selection management
> long [135]caretBlinkRate();
> boolean [136]setCaretSelectionRect(in Element element, in double x, in double
> y, in double w, in double h);
>
> // Active regions and hit testing
>
> boolean [137]setPathForElement(in Element element, in double zIndex);
> void [138]clearPathForElement(in Element element);
> void [139]clearPathsForElements();
>
> // text
> attribute DOMString [140]font; // (default 10px sans-serif)
> attribute DOMString [141]textAlign; // "start", "end", "left", "right
> ", "center" (default: "start")
> attribute DOMString [142]textBaseline; // "top", "hanging", "middle",
> "alphabetic", "ideographic", "bottom" (default: "alphabetic")
> void [143]fillText(in DOMString text, in double x, in double y, in optional do
> uble maxWidth);
> void [144]strokeText(in DOMString text, in double x, in double y, in optional
> double maxWidth);
> [145]TextMetrics [146]measureText(in DOMString text);
>
> // drawing images
> void [147]drawImage(in HTMLImageElement image, in double dx, in double dy, in
> optional double dw, in double dh);
> void [148]drawImage(in HTMLImageElement image, in double sx, in double sy, in
> double sw, in double sh, in double dx, in double dy, in double dw, in double dh)
> ;
> void [149]drawImage(in HTMLCanvasElement image, in double dx, in double dy, in
> optional double dw, in double dh);
> void [150]drawImage(in HTMLCanvasElement image, in double sx, in double sy, in
> double sw, in double sh, in double dx, in double dy, in double dw, in double dh
> );
> void [151]drawImage(in HTMLVideoElement image, in double dx, in double dy, in
> optional double dw, in double dh);
> void [152]drawImage(in HTMLVideoElement image, in double sx, in double sy, in
> double sw, in double sh, in double dx, in double dy, in double dw, in double dh)
> ;
>
> // pixel manipulation
> [153]ImageData [154]createImageData(in double sw, in double sh);
> [155]ImageData [156]createImageData(in [157]ImageData imagedata);
> [158]ImageData [159]getImageData(in double sx, in double sy, in double sw, in
> double sh);
> void [160]putImageData(in [161]ImageData imagedata, in double dx, in double dy
> , in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double d
> irtyHeight);
> };
>
> interface CanvasGradient {
> // opaque object
> void [162]addColorStop(in double offset, in DOMString color);
> };
>
> interface CanvasPattern {
> // opaque object
> };
>
> interface TextMetrics {
> readonly attribute double [163]width;
> readonly attribute double [164]baseline;
> };
>
> interface ImageData {
> readonly attribute unsigned long [165]width;
> readonly attribute unsigned long [166]height;
> readonly attribute [167]CanvasPixelArray [168]data;
> };
>
> interface CanvasPixelArray {
> readonly attribute unsigned long [169]length;
> [170]getter octet (in unsigned long index);
> [171]setter void (in unsigned long index, in octet value);
> };
>
> context . [172]canvas
> Returns the canvas element.
>
> The canvas attribute must return the canvas element that the context
> paints on.
>
> Except where otherwise specified, for the 2D context interface, any
> method call with a numeric argument whose value is infinite or a NaN
> value must be ignored.
>
> Whenever the CSS value currentColor is used as a color in this API, the
> "computed value of the 'color' property" for the purposes of
> determining the computed value of the currentColor keyword is the
> computed value of the 'color' property on the element in question at
> the time that the color is specified (e.g. when the appropriate
> attribute is set, or when the method is called; not when the color is
> rendered or otherwise used). If the computed value of the 'color'
> property is undefined for a particular case (e.g. because the element
> is not in a Document), then the "computed value of the 'color'
> property" for the purposes of determining the computed value of the
> currentColor keyword is fully opaque black. [173][CSSCOLOR]
>
> In the case of [174]addColorStop() on [175]CanvasGradient, the
> "computed value of the 'color' property" for the purposes of
> determining the computed value of the currentColor keyword is always
> fully opaque black (there is no associated element). [176][CSSCOLOR]
>
> This is because [177]CanvasGradient objects are canvas-neutral — a
> [178]CanvasGradient object created by one canvas can be used by
> another, and there is therefore no way to know which is the "element in
> question" at the time that the color is specified.
>
> 2 The canvas state
>
> Each context maintains a stack of drawing states. Drawing states
> consist of:
> * The current [179]transformation matrix.
> * The current [180]clipping region.
> * The current values of the following attributes: [181]strokeStyle,
> [182]fillStyle, [183]globalAlpha, [184]lineWidth, [185]lineCap,
> [186]lineJoin, [187]miterLimit, [188]shadowOffsetX,
> [189]shadowOffsetY, [190]shadowBlur, [191]shadowColor,
> [192]globalCompositeOperation, [193]font, [194]textAlign,
> [195]textBaseline.
>
> The current path and the current bitmap are not part of the drawing
> state. The current path is persistent, and can only be reset using the
> [196]beginPath() method. The current bitmap is a property of the
> canvas, not the context.
>
> context . [197]save()
> Pushes the current state onto the stack.
>
> context . [198]restore()
> Pops the top state on the stack, restoring the context to that
> state.
>
> The save() method must push a copy of the current drawing state onto
> the drawing state stack.
>
> The restore() method must pop the top entry in the drawing state stack,
> and reset the drawing state it describes. If there is no saved state,
> the method must do nothing.
>
> 3 Transformations
>
> The transformation matrix is applied to coordinates when creating
> shapes and paths.
>
> When the context is created, the transformation matrix must initially
> be the identity transform. It may then be adjusted using the
> transformation methods.
>
> The transformations must be performed in reverse order. For instance,
> if a scale transformation that doubles the width is applied, followed
> by a rotation transformation that rotates drawing operations by a
> quarter turn, and a rectangle twice as wide as it is tall is then drawn
> on the canvas, the actual result will be a square.
>
> context . [199]scale(x, y)
> Changes the transformation matrix to apply a scaling
> transformation with the given characteristics.
>
> context . [200]rotate(angle)
> Changes the transformation matrix to apply a rotation
> transformation with the given characteristics. The angle is in
> radians.
>
> context . [201]translate(x, y)
> Changes the transformation matrix to apply a translation
> transformation with the given characteristics.
>
> context . [202]transform(a, b, c, d, e, f)
> Changes the transformation matrix to apply the matrix given by
> the arguments as described below.
>
> context . [203]setTransform(a, b, c, d, e, f)
> Changes the transformation matrix to the matrix given by the
> arguments as described below.
>
> The scale(x, y) method must add the scaling transformation described by
> the arguments to the transformation matrix. The x argument represents
> the scale factor in the horizontal direction and the y argument
> represents the scale factor in the vertical direction. The factors are
> multiples.
>
> The rotate(angle) method must add the rotation transformation described
> by the argument to the transformation matrix. The angle argument
> represents a clockwise rotation angle expressed in radians.
>
> The translate(x, y) method must add the translation transformation
> described by the arguments to the transformation matrix. The x argument
> represents the translation distance in the horizontal direction and the
> y argument represents the translation distance in the vertical
> direction. The arguments are in coordinate space units.
>
> The transform(a, b, c, d, e, f) method must replace the current
> transformation matrix with the result of multiplying the current
> transformation matrix with the matrix described by:
>
> a c e
> b d f
> 0 0 1
>
> The arguments a, b, c, d, e, and f are sometimes called m11, m12, m21,
> m22, dx, and dy or m11, m21, m12, m22, dx, and dy. Care should be taken
> in particular with the order of the second and third arguments (b and
> c) as their order varies from API to API and APIs sometimes use the
> notation m12/m21 and sometimes m21/m12 for those positions.
>
> The setTransform(a, b, c, d, e, f) method must reset the current
> transform to the identity matrix, and then invoke the [204]transform(a,
> b, c, d, e, f) method with the same arguments.
>
> 4 Compositing
>
> context . [205]globalAlpha [ = value ]
> Returns the current alpha value applied to rendering operations.
>
> Can be set, to change the alpha value. Values outside of the
> range 0.0 .. 1.0 are ignored.
>
> context . [206]globalCompositeOperation [ = value ]
> Returns the current composition operation, from the list below.
>
> Can be set, to change the composition operation. Unknown values
> are ignored.
>
> All drawing operations are affected by the global compositing
> attributes, [207]globalAlpha and [208]globalCompositeOperation.
>
> The globalAlpha attribute gives an alpha value that is applied to
> shapes and images before they are composited onto the canvas. The value
> must be in the range from 0.0 (fully transparent) to 1.0 (no additional
> transparency). If an attempt is made to set the attribute to a value
> outside this range, including Infinity and Not-a-Number (NaN) values,
> the attribute must retain its previous value. When the context is
> created, the [209]globalAlpha attribute must initially have the value
> 1.0.
>
> The globalCompositeOperation attribute sets how shapes and images are
> drawn onto the existing bitmap, once they have had [210]globalAlpha and
> the current transformation matrix applied. It must be set to a value
> from the following list. In the descriptions below, the source image,
> A, is the shape or image being rendered, and the destination image, B,
> is the current state of the bitmap.
>
> source-atop
> A atop B. Display the source image wherever both images are
> opaque. Display the destination image wherever the destination
> image is opaque but the source image is transparent. Display
> transparency elsewhere.
>
> source-in
> A in B. Display the source image wherever both the source image
> and destination image are opaque. Display transparency
> elsewhere.
>
> source-out
> A out B. Display the source image wherever the source image is
> opaque and the destination image is transparent. Display
> transparency elsewhere.
>
> source-over (default)
> A over B. Display the source image wherever the source image is
> opaque. Display the destination image elsewhere.
>
> destination-atop
> B atop A. Same as [211]source-atop but using the destination
> image instead of the source image and vice versa.
>
> destination-in
> B in A. Same as [212]source-in but using the destination image
> instead of the source image and vice versa.
>
> destination-out
> B out A. Same as [213]source-out but using the destination image
> instead of the source image and vice versa.
>
> destination-over
> B over A. Same as [214]source-over but using the destination
> image instead of the source image and vice versa.
>
> lighter
> A plus B. Display the sum of the source image and destination
> image, with color values approaching 255 (100%) as a limit.
>
> copy
> A (B is ignored). Display the source image instead of the
> destination image.
>
> xor
> A xor B. Exclusive OR of the source image and destination image.
>
> vendorName-operationName
> Vendor-specific extensions to the list of composition operators
> should use this syntax.
>
> The operators in the above list must be treated as described by the
> Porter-Duff operator given at the start of their description (e.g. A
> over B). They are to be applied as part of the [215]drawing model, at
> which point the [216]clipping region is also applied. (Without a
> clipping region, these operators act on the whole bitmap with every
> operation.) [217][PORTERDUFF]
>
> These values are all case-sensitive — they must be used exactly as
> shown. User agents must not recognize values that are not a
> case-sensitive match for one of the values given above.
>
> On setting, if the user agent does not recognize the specified value,
> it must be ignored, leaving the value of [218]globalCompositeOperation
> unaffected.
>
> When the context is created, the [219]globalCompositeOperation
> attribute must initially have the value source-over.
>
> 5 Colors and styles
>
> context . [220]strokeStyle [ = value ]
> Returns the current style used for stroking shapes.
>
> Can be set, to change the stroke style.
>
> The style can be either a string containing a CSS color, or a
> [221]CanvasGradient or [222]CanvasPattern object. Invalid values
> are ignored.
>
> context . [223]fillStyle [ = value ]
> Returns the current style used for filling shapes.
>
> Can be set, to change the fill style.
>
> The style can be either a string containing a CSS color, or a
> [224]CanvasGradient or [225]CanvasPattern object. Invalid values
> are ignored.
>
> The strokeStyle attribute represents the color or style to use for the
> lines around shapes, and the fillStyle attribute represents the color
> or style to use inside the shapes.
>
> Both attributes can be either strings, [226]CanvasGradients, or
> [227]CanvasPatterns. On setting, strings must be parsed as CSS <color>
> values and the color assigned, and [228]CanvasGradient and
> [229]CanvasPattern objects must be assigned themselves. [230][CSSCOLOR]
> If the value is a string but cannot be parsed as a CSS <color> value,
> or is neither a string, a [231]CanvasGradient, nor a
> [232]CanvasPattern, then it must be ignored, and the attribute must
> retain its previous value.
>
> When set to a [233]CanvasPattern or [234]CanvasGradient object, the
> assignment is live, meaning that changes made to the object after the
> assignment do affect subsequent stroking or filling of shapes.
>
> On getting, if the value is a color, then the [235]serialization of the
> color must be returned. Otherwise, if it is not a color but a
> [236]CanvasGradient or [237]CanvasPattern, then the respective object
> must be returned. (Such objects are opaque and therefore only useful
> for assigning to other attributes or for comparison to other gradients
> or patterns.)
>
> The serialization of a color for a color value is a string, computed as
> follows: if it has alpha equal to 1.0, then the string is a lowercase
> six-digit hex value, prefixed with a "#" character (U+0023 NUMBER
> SIGN), with the first two digits representing the red component, the
> next two digits representing the green component, and the last two
> digits representing the blue component, the digits being in the range
> 0-9 a-f (U+0030 to U+0039 and U+0061 to U+0066). Otherwise, the color
> value has alpha less than 1.0, and the string is the color value in the
> CSS rgba() functional-notation format: the literal string rgba (U+0072
> U+0067 U+0062 U+0061) followed by a U+0028 LEFT PARENTHESIS, a base-ten
> integer in the range 0-255 representing the red component (using digits
> 0-9, U+0030 to U+0039, in the shortest form possible), a literal U+002C
> COMMA and U+0020 SPACE, an integer for the green component, a comma and
> a space, an integer for the blue component, another comma and space, a
> U+0030 DIGIT ZERO, if the alpha value is greater than zero then a
> U+002E FULL STOP (representing the decimal point), if the alpha value
> is greater than zero then one or more digits in the range 0-9 (U+0030
> to U+0039) representing the fractional part of the alpha value, and
> finally a U+0029 RIGHT PARENTHESIS.
>
> When the context is created, the [238]strokeStyle and [239]fillStyle
> attributes must initially have the string value #000000.
> __________________________________________________________________
>
> There are two types of gradients, linear gradients and radial
> gradients, both represented by objects implementing the opaque
> [240]CanvasGradient interface.
>
> Once a gradient has been created (see below), stops are placed along it
> to define how the colors are distributed along the gradient. The color
> of the gradient at each stop is the color specified for that stop.
> Between each such stop, the colors and the alpha component must be
> linearly interpolated over the RGBA space without premultiplying the
> alpha value to find the color to use at that offset. Before the first
> stop, the color must be the color of the first stop. After the last
> stop, the color must be the color of the last stop. When there are no
> stops, the gradient is transparent black.
>
> gradient . [241]addColorStop(offset, color)
> Adds a color stop with the given color to the gradient at the
> given offset. 0.0 is the offset at one end of the gradient, 1.0
> is the offset at the other end.
>
> Throws an INDEX_SIZE_ERR exception if the offset is out of
> range. Throws a SYNTAX_ERR exception if the color cannot be
> parsed.
>
> gradient = context . [242]createLinearGradient(x0, y0, x1, y1)
> Returns a [243]CanvasGradient object that represents a linear
> gradient that paints along the line given by the coordinates
> represented by the arguments.
>
> If any of the arguments are not finite numbers, throws a
> NOT_SUPPORTED_ERR exception.
>
> gradient = context . [244]createRadialGradient(x0, y0, r0, x1, y1, r1)
> Returns a [245]CanvasGradient object that represents a radial
> gradient that paints along the cone given by the circles
> represented by the arguments.
>
> If any of the arguments are not finite numbers, throws a
> NOT_SUPPORTED_ERR exception. If either of the radii are
> negative, throws an INDEX_SIZE_ERR exception.
>
> The addColorStop(offset, color) method on the [246]CanvasGradient
> interface adds a new stop to a gradient. If the offset is less than 0,
> greater than 1, infinite, or NaN, then an INDEX_SIZE_ERR exception must
> be raised. If the color cannot be parsed as a CSS <color> value, then a
> SYNTAX_ERR exception must be raised. Otherwise, the gradient must have
> a new stop placed, at offset offset relative to the whole gradient, and
> with the color obtained by parsing color as a CSS <color> value. If
> multiple stops are added at the same offset on a gradient, they must be
> placed in the order added, with the first one closest to the start of
> the gradient, and each subsequent one infinitesimally further along
> towards the end point (in effect causing all but the first and last
> stop added at each point to be ignored).
>
> The createLinearGradient(x0, y0, x1, y1) method takes four arguments
> that represent the start point (x0, y0) and end point (x1, y1) of the
> gradient. If any of the arguments to [247]createLinearGradient() are
> infinite or NaN, the method must raise a NOT_SUPPORTED_ERR exception.
> Otherwise, the method must return a linear [248]CanvasGradient
> initialized with the specified line.
>
> Linear gradients must be rendered such that all points on a line
> perpendicular to the line that crosses the start and end points have
> the color at the point where those two lines cross (with the colors
> coming from the [249]interpolation and extrapolation described above).
> The points in the linear gradient must be transformed as described by
> the [250]current transformation matrix when rendering.
>
> If x0 = x1 and y0 = y1, then the linear gradient must paint nothing.
>
> The createRadialGradient(x0, y0, r0, x1, y1, r1) method takes six
> arguments, the first three representing the start circle with origin
> (x0, y0) and radius r0, and the last three representing the end circle
> with origin (x1, y1) and radius r1. The values are in coordinate space
> units. If any of the arguments are infinite or NaN, a NOT_SUPPORTED_ERR
> exception must be raised. If either of r0 or r1 are negative, an
> INDEX_SIZE_ERR exception must be raised. Otherwise, the method must
> return a radial [251]CanvasGradient initialized with the two specified
> circles.
>
> Radial gradients must be rendered by following these steps:
> 1. If x[0] = x[1] and y[0] = y[1] and r[0] = r[1], then the radial
> gradient must paint nothing. Abort these steps.
> 2. Let x(ω) = (x[1]-x[0])ω + x[0]
> Let y(ω) = (y[1]-y[0])ω + y[0]
> Let r(ω) = (r[1]-r[0])ω + r[0]
> Let the color at ω be the color at that position on the gradient
> (with the colors coming from the [252]interpolation and
> extrapolation described above).
> 3. For all values of ω where r(ω) > 0, starting with the value of ω
> nearest to positive infinity and ending with the value of ω nearest
> to negative infinity, draw the circumference of the circle with
> radius r(ω) at position (x(ω), y(ω)), with the color at ω, but only
> painting on the parts of the canvas that have not yet been painted
> on by earlier circles in this step for this rendering of the
> gradient.
>
> This effectively creates a cone, touched by the two circles defined in
> the creation of the gradient, with the part of the cone before the
> start circle (0.0) using the color of the first offset, the part of the
> cone after the end circle (1.0) using the color of the last offset, and
> areas outside the cone untouched by the gradient (transparent black).
>
> The points in the radial gradient must be transformed as described by
> the [253]current transformation matrix when rendering.
>
> Gradients must be painted only where the relevant stroking or filling
> effects requires that they be drawn.
> __________________________________________________________________
>
> Patterns are represented by objects implementing the opaque
> [254]CanvasPattern interface.
>
> pattern = context . [255]createPattern(image, repetition)
> Returns a [256]CanvasPattern object that uses the given image
> and repeats in the direction(s) given by the repetition
> argument.
>
> The allowed values for repetition are repeat (both directions),
> repeat-x (horizontal only), repeat-y (vertical only), and
> no-repeat (neither). If the repetition argument is empty or
> null, the value repeat is used.
>
> If the first argument isn't an img, canvas, or video element,
> throws a TYPE_MISMATCH_ERR exception. If the image has no image
> data, throws an INVALID_STATE_ERR exception. If the second
> argument isn't one of the allowed values, throws a SYNTAX_ERR
> exception. If the image isn't yet fully decoded, then the method
> returns null.
>
> To create objects of this type, the createPattern(image, repetition)
> method is used. The first argument gives the image to use as the
> pattern (either an HTMLImageElement, HTMLCanvasElement, or
> HTMLVideoElement object). Modifying this image after calling the
> [257]createPattern() method must not affect the pattern. The second
> argument must be a string with one of the following values: repeat,
> repeat-x, repeat-y, no-repeat. If the empty string or null is
> specified, repeat must be assumed. If an unrecognized value is given,
> then the user agent must raise a SYNTAX_ERR exception. User agents must
> recognize the four values described above exactly (e.g. they must not
> do case folding). Except as specified below, the method must return a
> [258]CanvasPattern object suitably initialized.
>
> The image argument is an instance of either HTMLImageElement,
> HTMLCanvasElement, or HTMLVideoElement. If the image is null, the
> implementation must raise a TYPE_MISMATCH_ERR exception.
>
> If the image argument is an HTMLImageElement object that is not fully
> decodable, or if the image argument is an HTMLVideoElement object whose
> readyState attribute is either HAVE_NOTHING or HAVE_METADATA, then the
> implementation must return null.
>
> If the image argument is an HTMLCanvasElement object with either a
> horizontal dimension or a vertical dimension equal to zero, then the
> implementation must raise an INVALID_STATE_ERR exception.
>
> Patterns must be painted so that the top left of the first image is
> anchored at the origin of the coordinate space, and images are then
> repeated horizontally to the left and right (if the repeat-x string was
> specified) or vertically up and down (if the repeat-y string was
> specified) or in all four directions all over the canvas (if the repeat
> string was specified). The images are not scaled by this process; one
> CSS pixel of the image must be painted on one coordinate space unit. Of
> course, patterns must actually be painted only where the stroking or
> filling effect requires that they be drawn, and are affected by the
> current transformation matrix.
>
> If the original image data is a bitmap image, the value painted at a
> point in the area of the repetitions is computed by filtering the
> original image data. The user agent may use any filtering algorithm
> (for example bilinear interpolation or nearest-neighbor). When the
> filtering algorithm requires a pixel value from outside the original
> image data, it must instead use the value from wrapping the pixel's
> coordinates to the original image's dimensions. (That is, the filter
> uses 'repeat' behavior, regardless of the value of repetition.)
>
> When the [259]createPattern() method is passed an animated image as its
> image argument, the user agent must use the poster frame of the
> animation, or, if there is no poster frame, the first frame of the
> animation.
>
> When the image argument is an HTMLVideoElement, then the frame at the
> current playback position must be used as the source image, and the
> source image's dimensions must be the intrinsic width and intrinsic
> height of the media resource (i.e. after any aspect-ratio correction
> has been applied).
>
> 6 Line styles
>
> context . [260]lineWidth [ = value ]
> Returns the current line width.
>
> Can be set, to change the line width. Values that are not finite
> values greater than zero are ignored.
>
> context . [261]lineCap [ = value ]
> Returns the current line cap style.
>
> Can be set, to change the line cap style.
>
> The possible line cap styles are butt, round, and square. Other
> values are ignored.
>
> context . [262]lineJoin [ = value ]
> Returns the current line join style.
>
> Can be set, to change the line join style.
>
> The possible line join styles are bevel, round, and miter. Other
> values are ignored.
>
> context . [263]miterLimit [ = value ]
> Returns the current miter limit ratio.
>
> Can be set, to change the miter limit ratio. Values that are not
> finite values greater than zero are ignored.
>
> The lineWidth attribute gives the width of lines, in coordinate space
> units. On getting, it must return the current value. On setting, zero,
> negative, infinite, and NaN values must be ignored, leaving the value
> unchanged; other values must change the current value to the new value.
>
> When the context is created, the [264]lineWidth attribute must
> initially have the value 1.0.
> __________________________________________________________________
>
> The lineCap attribute defines the type of endings that UAs will place
> on the end of lines. The three valid values are butt, round, and
> square. The butt value means that the end of each line has a flat edge
> perpendicular to the direction of the line (and that no additional line
> cap is added). The round value means that a semi-circle with the
> diameter equal to the width of the line must then be added on to the
> end of the line. The square value means that a rectangle with the
> length of the line width and the width of half the line width, placed
> flat against the edge perpendicular to the direction of the line, must
> be added at the end of each line.
>
> On getting, it must return the current value. On setting, if the new
> value is one of the literal strings butt, round, and square, then the
> current value must be changed to the new value; other values must
> ignored, leaving the value unchanged.
>
> When the context is created, the [265]lineCap attribute must initially
> have the value butt.
> __________________________________________________________________
>
> The lineJoin attribute defines the type of corners that UAs will place
> where two lines meet. The three valid values are bevel, round, and
> miter.
>
> On getting, it must return the current value. On setting, if the new
> value is one of the literal strings bevel, round, and miter, then the
> current value must be changed to the new value; other values must be
> ignored, leaving the value unchanged.
>
> When the context is created, the [266]lineJoin attribute must initially
> have the value miter.
> __________________________________________________________________
>
> A join exists at any point in a subpath shared by two consecutive
> lines. When a subpath is closed, then a join also exists at its first
> point (equivalent to its last point) connecting the first and last
> lines in the subpath.
>
> In addition to the point where the join occurs, two additional points
> are relevant to each join, one for each line: the two corners found
> half the line width away from the join point, one perpendicular to each
> line, each on the side furthest from the other line.
>
> A filled triangle connecting these two opposite corners with a straight
> line, with the third point of the triangle being the join point, must
> be rendered at all joins. The [267]lineJoin attribute controls whether
> anything else is rendered. The three aforementioned values have the
> following meanings:
>
> The bevel value means that this is all that is rendered at joins.
>
> The round value means that a filled arc connecting the two
> aforementioned corners of the join, abutting (and not overlapping) the
> aforementioned triangle, with the diameter equal to the line width and
> the origin at the point of the join, must be rendered at joins.
>
> The miter value means that a second filled triangle must (if it can
> given the miter length) be rendered at the join, with one line being
> the line between the two aforementioned corners, abutting the first
> triangle, and the other two being continuations of the outside edges of
> the two joining lines, as long as required to intersect without going
> over the miter length.
>
> The miter length is the distance from the point where the join occurs
> to the intersection of the line edges on the outside of the join. The
> miter limit ratio is the maximum allowed ratio of the miter length to
> half the line width. If the miter length would cause the miter limit
> ratio to be exceeded, this second triangle must not be rendered.
>
> The miter limit ratio can be explicitly set using the miterLimit
> attribute. On getting, it must return the current value. On setting,
> zero, negative, infinite, and NaN values must be ignored, leaving the
> value unchanged; other values must change the current value to the new
> value.
>
> When the context is created, the [268]miterLimit attribute must
> initially have the value 10.0.
>
> 7 Shadows
>
> All drawing operations are affected by the four global shadow
> attributes.
>
> context . [269]shadowColor [ = value ]
> Returns the current shadow color.
>
> Can be set, to change the shadow color. Values that cannot be
> parsed as CSS colors are ignored.
>
> context . [270]shadowOffsetX [ = value ]
> context . [271]shadowOffsetY [ = value ]
> Returns the current shadow offset.
>
> Can be set, to change the shadow offset. Values that are not
> finite numbers are ignored.
>
> context . [272]shadowBlur [ = value ]
> Returns the current level of blur applied to shadows.
>
> Can be set, to change the blur level. Values that are not finite
> numbers greater than or equal to zero are ignored.
>
> The shadowColor attribute sets the color of the shadow.
>
> When the context is created, the [273]shadowColor attribute initially
> must be fully-transparent black.
>
> On getting, the [274]serialization of the color must be returned.
>
> On setting, the new value must be parsed as a CSS <color> value and the
> color assigned. If the value cannot be parsed as a CSS <color> value
> then it must be ignored, and the attribute must retain its previous
> value. [275][CSSCOLOR]
>
> The shadowOffsetX and shadowOffsetY attributes specify the distance
> that the shadow will be offset in the positive horizontal and positive
> vertical distance respectively. Their values are in coordinate space
> units. They are not affected by the current transformation matrix.
>
> When the context is created, the shadow offset attributes must
> initially have the value 0.
>
> On getting, they must return their current value. On setting, the
> attribute being set must be set to the new value, except if the value
> is infinite or NaN, in which case the new value must be ignored.
>
> The shadowBlur attribute specifies the level of the blurring effect.
> (The units do not map to coordinate space units, and are not affected
> by the current transformation matrix.)
>
> When the context is created, the [276]shadowBlur attribute must
> initially have the value 0.
>
> On getting, the attribute must return its current value. On setting the
> attribute must be set to the new value, except if the value is
> negative, infinite or NaN, in which case the new value must be ignored.
>
> Shadows are only drawn if the opacity component of the alpha component
> of the color of [277]shadowColor is non-zero and either the
> [278]shadowBlur is non-zero, or the [279]shadowOffsetX is non-zero, or
> the [280]shadowOffsetY is non-zero.
>
> [281]When shadows are drawn, they must be rendered as follows:
> 1. Let A be an infinite transparent black bitmap on which the source
> image for which a shadow is being created has been rendered.
> 2. Let B be an infinite transparent black bitmap, with a coordinate
> space and an origin identical to A.
> 3. Copy the alpha channel of A to B, offset by [282]shadowOffsetX in
> the positive x direction, and [283]shadowOffsetY in the positive y
> direction.
> 4. If [284]shadowBlur is greater than 0:
> 1. Let σ be half the value of [285]shadowBlur.
> 2. Perform a 2D Gaussian Blur on B, using σ as the standard
> deviation.
> User agents may limit values of σ to an implementation-specific
> maximum value to avoid exceeding hardware limitations during the
> Gaussian blur operation.
> 5. Set the red, green, and blue components of every pixel in B to the
> red, green, and blue components (respectively) of the color of
> [286]shadowColor.
> 6. Multiply the alpha component of every pixel in B by the alpha
> component of the color of [287]shadowColor.
> 7. The shadow is in the bitmap B, and is rendered as part of the
> [288]drawing model described below.
>
> If the current composition operation is [289]copy, shadows effectively
> won't render (since the shape will overwrite the shadow).
>
> 8 Simple shapes (rectangles)
>
> There are three methods that immediately draw rectangles to the bitmap.
> They each take four arguments; the first two give the x and y
> coordinates of the top left of the rectangle, and the second two give
> the width w and height h of the rectangle, respectively.
>
> The [290]current transformation matrix must be applied to the following
> four coordinates, which form the path that must then be closed to get
> the specified rectangle: (x, y), (x+w, y), (x+w, y+h), (x, y+h).
>
> Shapes are painted without affecting the current path, and are subject
> to the [291]clipping region, and, with the exception of
> [292]clearRect(), also [293]shadow effects, [294]global alpha, and
> [295]global composition operators.
>
> context . [296]clearRect(x, y, w, h)
> Clears all pixels on the canvas in the given rectangle to
> transparent black.
>
> context . [297]fillRect(x, y, w, h)
> Paints the given rectangle onto the canvas, using the current
> fill style.
>
> context . [298]strokeRect(x, y, w, h)
> Paints the box that outlines the given rectangle onto the
> canvas, using the current stroke style.
>
> The clearRect(x, y, w, h) method must clear the pixels in the specified
> rectangle that also intersect the current clipping region to a fully
> transparent black, erasing any previous image. If either height or
> width are zero, this method has no effect.
>
> The fillRect(x, y, w, h) method must paint the specified rectangular
> area using the [299]fillStyle. If either height or width are zero, this
> method has no effect.
>
> The strokeRect(x, y, w, h) method must stroke the specified rectangle's
> path using the [300]strokeStyle, [301]lineWidth, [302]lineJoin, and (if
> appropriate) [303]miterLimit attributes. If both height and width are
> zero, this method has no effect, since there is no path to stroke (it's
> a point). If only one of the two is zero, then the method will draw a
> line instead (the path for the outline is just a straight line along
> the non-zero dimension).
>
> 9 Complex shapes (paths)
>
> The context always has a current path. There is only one current path,
> it is not part of the [304]drawing state.
>
> A path has a list of zero or more subpaths. Each subpath consists of a
> list of one or more points, connected by straight or curved lines, and
> a flag indicating whether the subpath is closed or not. A closed
> subpath is one where the last point of the subpath is connected to the
> first point of the subpath by a straight line. Subpaths with fewer than
> two points are ignored when painting the path.
>
> context . [305]beginPath()
> Resets the current path.
>
> context . [306]moveTo(x, y)
> Creates a new subpath with the given point.
>
> context . [307]closePath()
> Marks the current subpath as closed, and starts a new subpath
> with a point the same as the start and end of the newly closed
> subpath.
>
> context . [308]lineTo(x, y)
> Adds the given point to the current subpath, connected to the
> previous one by a straight line.
>
> context . [309]quadraticCurveTo(cpx, cpy, x, y)
> Adds the given point to the current subpath, connected to the
> previous one by a quadratic Bézier curve with the given control
> point.
>
> context . [310]bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
> Adds the given point to the current subpath, connected to the
> previous one by a cubic Bézier curve with the given control
> points.
>
> context . [311]arcTo(x1, y1, x2, y2, radius)
> Adds an arc with the given control points and radius to the
> current subpath, connected to the previous point by a straight
> line.
>
> Throws an INDEX_SIZE_ERR exception if the given radius is
> negative.
>
> context . [312]arc(x, y, radius, startAngle, endAngle [, anticlockwise
> ] )
> Adds points to the subpath such that the arc described by the
> circumference of the circle described by the arguments, starting
> at the given start angle and ending at the given end angle,
> going in the given direction (defaulting to clockwise), is added
> to the path, connected to the previous point by a straight line.
>
> Throws an INDEX_SIZE_ERR exception if the given radius is
> negative.
>
> context . [313]rect(x, y, w, h)
> Adds a new closed subpath to the path, representing the given
> rectangle.
>
> context . [314]fill()
> Fills the subpaths with the current fill style.
>
> context . [315]stroke()
> Strokes the subpaths with the current stroke style.
>
> context . [316]clip()
> Further constrains the clipping region to the given path.
>
> context . [317]isPointInPath(x, y)
> Returns true if the given point is in the current path.
>
> Initially, the context's path must have zero subpaths.
>
> The points and lines added to the path by these methods must be
> transformed according to the [318]current transformation matrix as they
> are added.
>
> The beginPath() method must empty the list of subpaths so that the
> context once again has zero subpaths.
>
> The moveTo(x, y) method must create a new subpath with the specified
> point as its first (and only) point.
>
> When the user agent is to ensure there is a subpath for a coordinate
> (x, y), the user agent must check to see if the context has any
> subpaths, and if it does not, then the user agent must create a new
> subpath with the point (x, y) as its first (and only) point, as if the
> [319]moveTo() method had been called.
>
> The closePath() method must do nothing if the context has no subpaths.
> Otherwise, it must mark the last subpath as closed, create a new
> subpath whose first point is the same as the previous subpath's first
> point, and finally add this new subpath to the path.
>
> If the last subpath had more than one point in its list of points, then
> this is equivalent to adding a straight line connecting the last point
> back to the first point, thus "closing" the shape, and then repeating
> the last (possibly implied) [320]moveTo() call.
>
> New points and the lines connecting them are added to subpaths using
> the methods described below. In all cases, the methods only modify the
> last subpath in the context's paths.
>
> The lineTo(x, y) method must [321]ensure there is a subpath for (x, y)
> if the context has no subpaths. Otherwise, it must connect the last
> point in the subpath to the given point (x, y) using a straight line,
> and must then add the given point (x, y) to the subpath.
>
> The quadraticCurveTo(cpx, cpy, x, y) method must [322]ensure there is a
> subpath for (cpx, cpy), and then must connect the last point in the
> subpath to the given point (x, y) using a quadratic Bézier curve with
> control point (cpx, cpy), and must then add the given point (x, y) to
> the subpath. [323][BEZIER]
>
> The bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method must [324]ensure
> there is a subpath for (cp1x, cp1y), and then must connect the last
> point in the subpath to the given point (x, y) using a cubic Bézier
> curve with control points (cp1x, cp1y) and (cp2x, cp2y). Then, it must
> add the point (x, y) to the subpath. [325][BEZIER]
> __________________________________________________________________
>
> The arcTo(x1, y1, x2, y2, radius) method must first [326]ensure there
> is a subpath for (x1, y1). Then, the behavior depends on the arguments
> and the last point in the subpath, as described below.
>
> Negative values for radius must cause the implementation to raise an
> INDEX_SIZE_ERR exception.
>
> Let the point (x0, y0) be the last point in the subpath.
>
> If the point (x0, y0) is equal to the point (x1, y1), or if the point
> (x1, y1) is equal to the point (x2, y2), or if the radius radius is
> zero, then the method must add the point (x1, y1) to the subpath, and
> connect that point to the previous point (x0, y0) by a straight line.
>
> Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a
> single straight line, then the method must add the point (x1, y1) to
> the subpath, and connect that point to the previous point (x0, y0) by a
> straight line.
>
> Otherwise, let The Arc be the shortest arc given by circumference of
> the circle that has radius radius, and that has one point tangent to
> the half-infinite line that crosses the point (x0, y0) and ends at the
> point (x1, y1), and that has a different point tangent to the
> half-infinite line that ends at the point (x1, y1) and crosses the
> point (x2, y2). The points at which this circle touches these two lines
> are called the start and end tangent points respectively. The method
> must connect the point (x0, y0) to the start tangent point by a
> straight line, adding the start tangent point to the subpath, and then
> must connect the start tangent point to the end tangent point by The
> Arc, adding the end tangent point to the subpath.
> __________________________________________________________________
>
> The arc(x, y, radius, startAngle, endAngle, anticlockwise) method draws
> an arc. If the context has any subpaths, then the method must add a
> straight line from the last point in the subpath to the start point of
> the arc. In any case, it must draw the arc between the start point of
> the arc and the end point of the arc, and add the start and end points
> of the arc to the subpath. The arc and its start and end points are
> defined as follows:
>
> Consider a circle that has its origin at (x, y) and that has radius
> radius. The points at startAngle and endAngle along this circle's
> circumference, measured in radians clockwise from the positive x-axis,
> are the start and end points respectively.
>
> If the anticlockwise argument is omitted or false and
> endAngle-startAngle is equal to or greater than 2π, or, if the
> anticlockwise argument is true and startAngle-endAngle is equal to or
> greater than 2π, then the arc is the whole circumference of this
> circle.
>
> Otherwise, the arc is the path along the circumference of this circle
> from the start point to the end point, going anti-clockwise if the
> anticlockwise argument is true, and clockwise otherwise. Since the
> points are on the circle, as opposed to being simply angles from zero,
> the arc can never cover an angle greater than 2π radians. If the two
> points are the same, or if the radius is zero, then the arc is defined
> as being of zero length in both directions.
>
> Negative values for radius must cause the implementation to raise an
> INDEX_SIZE_ERR exception.
> __________________________________________________________________
>
> The rect(x, y, w, h) method must create a new subpath containing just
> the four points (x, y), (x+w, y), (x+w, y+h), (x, y+h), with those four
> points connected by straight lines, and must then mark the subpath as
> closed. It must then create a new subpath with the point (x, y) as the
> only point in the subpath.
>
> The fill() method must fill all the subpaths of the current path, using
> [327]fillStyle, and using the non-zero winding number rule. Open
> subpaths must be implicitly closed when being filled (without affecting
> the actual subpaths).
>
> Thus, if two overlapping but otherwise independent subpaths have
> opposite windings, they cancel out and result in no fill. If they have
> the same winding, that area just gets painted once.
>
> The stroke() method must calculate the strokes of all the subpaths of
> the current path, using the [328]lineWidth, [329]lineCap,
> [330]lineJoin, and (if appropriate) [331]miterLimit attributes, and
> then fill the combined stroke area using the [332]strokeStyle
> attribute.
>
> Since the subpaths are all stroked as one, overlapping parts of the
> paths in one stroke operation are treated as if their union was what
> was painted.
>
> Paths, when filled or stroked, must be painted without affecting the
> current path, and must be subject to [333]shadow effects, [334]global
> alpha, the [335]clipping region, and [336]global composition operators.
> (Transformations affect the path when the path is created, not when it
> is painted, though the stroke style is still affected by the
> transformation during painting.)
>
> Zero-length line segments must be pruned before stroking a path. Empty
> subpaths must be ignored.
>
> The clip() method must create a new clipping region by calculating the
> intersection of the current clipping region and the area described by
> the current path, using the non-zero winding number rule. Open subpaths
> must be implicitly closed when computing the clipping region, without
> affecting the actual subpaths. The new clipping region replaces the
> current clipping region.
>
> When the context is initialized, the clipping region must be set to the
> rectangle with the top left corner at (0,0) and the width and height of
> the coordinate space.
>
> The isPointInPath(x, y) method must return true if the point given by
> the x and y coordinates passed to the method, when treated as
> coordinates in the canvas coordinate space unaffected by the current
> transformation, is inside the current path as determined by the
> non-zero winding number rule; and must return false otherwise. Points
> on the path itself are considered to be inside the path. If either of
> the arguments is infinite or NaN, then the method must return false.
>
> 10 Focus management
>
> When a canvas is interactive, authors should include focusable elements
> in the element's fallback content corresponding to each focusable part
> of the canvas.
>
> To indicate which focusable part of the canvas is currently focused,
> authors should use either the [337]drawSystemFocusRing() method or the
> [338]drawCustomFocusRing() method, passing it the element for which a
> ring is being drawn. This method only draws the focus ring if the
> element is focused or is a descendant of the element with focus.
>
> invalidFocus = context . [339]drawSystemFocusRing(element)
> If the given element is neither focused or a descendant of an
> element with focus return false. Otherwise, draws a focus ring
> around the current path, following the platform conventions for
> focus rings.
>
> If no such convention exists, draw a focus ring using the custom
> styling applied to the path. Return true.
>
> invalidFocus = context . [340]drawCustomFocusRing(element)
> If the given element is neither focused or a descendant of an
> element with focus return false.
>
> Otherwise, draw a custom focus ring, using the current applied
> path styling, along the path. (see [341]the example below).
> Return true.
>
> The drawSystemFocusRing(element) method, when invoked, must run the
> following steps:
> 1. If the element is not focused or is not a descendant of the element
> with focus, then return false and abort these steps.
> 2. If supporting accessibility, [342]inform the user that the focus
> ring is at the location computed from the bounds of the path. User
> agents may wait until the next time the [343]event loop reaches its
> "update the rendering" step to inform the user.
> 3. If the user has requested the use of particular focus rings (e.g.
> high-contrast focus rings) then draw a focus ring of the
> appropriate style along the path, following platform conventions.
> Some platforms only draw focus rings around elements that have been
> focused from the keyboard, and not those focused from the mouse.
> Other platforms simply don't draw focus rings around some elements
> at all unless relevant accessibility features are enabled. This API
> is intended to follow these conventions. User agents that implement
> distinctions based on the manner in which the element was focused
> are encouraged to classify focus driven by the [344]focus() method
> based on the kind of user interaction event from which the call was
> triggered (if any).
> The focus ring should not be subject to the [345]shadow effects,
> the [346]global alpha, or the [347]global composition operators,
> but should be subject to the [348]clipping region.
> 4. Otherwise, draw a focus along the path using the current path style
> settings.
> The focus ring should not be subject to the [349]shadow effects,
> the [350]global alpha, or the [351]global composition operators,
> but should be subject to the [352]clipping region.
> 5. Return true.
>
> The drawCustomFocusRing(element) method, when invoked, must run the
> following steps:
> 1. If the element is not focused or is not a descendant of the element
> with focus, then return false and abort these steps.
> 2. If supporting accessibility, [353]inform the user that the focus
> ring is at the location computed from the bounds of the path. User
> agents may wait until the next time the [354]event loop reaches its
> "update the rendering" step to inform the user.
> 3. Draw a focus ring using the style applied to the current path.
> The focus ring should not be subject to the [355]shadow effects,
> the [356]global alpha, or the [357]global composition operators,
> but should be subject to the [358]clipping region.
> 4. Return true.
>
> "Inform the user", as used in this section, could mean calling a system
> accessibility API, which would notify assistive technologies such as
> magnification tools as to the location of the focus ring. To properly
> drive magnification based on a focus change, a system accessibility API
> driving a screen magnifier needs the bounds for the newly focused
> object. The methods above are intended to enable this by allowing the
> user agent to report the bounding box of the path used to render the
> focus ring as the bounds of the element element passed as an argument,
> if that element is focused, and the bounding box of the area to which
> the user agent is scrolling as the bounding box of the current
> selection.
>
> 11 Caret and selection management
>
> When a canvas implementation is used to render interactive content that
> contains a caret or selection, it is essential that all users be able
> to follow the current caret or selection position.
>
> The [359]setCaretSelectionRect() method should be used to indicate the
> location of the last rendered [360]caret position or [361]selection
> position on the canvas, passing it the canvas fallback element
> associated with the last drawn of either the caret position or the
> selection.
>
> When drawing a blinking caret the author must adhere to the blink rates
> in systems that support this feature. User agents must provide the
> system caret blink rate to content authors. Default system caret blink
> rate settings are roughly once every 500 milliseconds.
>
> To access the system caret blink rate in canvas use the
> [362]caretBlinkRate() method
>
> success = context . [363]setCaretSelectionRect(element, x, y, w, h)
> Returns true if the given element is focused or a document
> descendant of an element with focus. Otherwise, returns false.
>
> rate = context . [364]caretBlinkRate()
> Returns the blink rate of the system in milliseconds if
> supported. Otherwise, returns -1 if it is unsupported by the
> system.
>
> Screen magnifiers, used by low vision users, use this position to move
> the magnification point on the screen.
>
> The setCaretSelectionRect(element, x, y, w, h) method, when invoked,
> must run the following steps:
> 1. If element does not have selected content and is not focused return
> false and abort these steps.
> 2. If the element is not a descendant of the element with whose
> context the method is associated, then return false and abort these
> step.
> 3. Transform the given point (x, y), the width w, and the height h
> according to the [365]current transformation matrix.
> 4. If the user agent supports a platform accessibility API the user
> agent must use the element, transformed coordinates and transformed
> bounding box, and provide it through the supported accessibility
> API implementation.
> 5. Return true.
>
> If the user resizes or moves the user agent window the user agent
> report must reflect the revised (x, y, w, h) position (or rectangle) in
> the accessibility API mapping.
>
> High blink rates may cause epileptic seizures in some users.
>
> The caretBlinkRate() method, when invoked, must run the following
> steps:
> 1. If the operating system supports a caret blink rate setting the
> user agent must return a long value in milliseconds.
> 2. If the operating system does not support a caret blink rate setting
> the user agent must return a long value less than zero.
>
> When the caret blink rate value returned:
> * For blink rates greater than zero the author, when drawing a
> blinking caret, must reflect the blink rate returned by this
> method.
> * For a blink rate less than zero the author, when drawing a blinking
> caret, must determine the blink rate.
> * For a blink rate of zero the author should visibly render the
> caret.
>
> Status: This example should be updated to remove compatibility code for
> non-compliant implementations:
>
> This canvas element has a couple of checkboxes:
> <canvas tabindex="-1" id="example" height="400" width="750" role="application">
> <!-- Canvas Subtree acts as Shadow DOM that the browser maps to the platform ac
> cessibility API -->
>
> <label id="labelA" for="showA"><input id="showA" role="checkbox" aria-labelledb
> y="labelA" type="checkbox" /> Show "A"</label>
> <label id="labelB" for="showB"><input id="showB" role="checkbox" aria-labelledb
> y="labelB" type="checkbox" /> Show "B"</label>
>
> <!-- ... -->
> </canvas>
> <script>
> /*/
> Canvas is a low level API and requires manual management of all interactivity
> .
> The following example is quite verbose, and demonstrates the minimum of progr
> amming
> necessary to enable a simple checkbox element within canvas.
> /*/
> function drawCheckbox(context, element, x, y, pathOnly) {
> context.save();
> context.font = '10px sans-serif';
> context.textAlign = 'left';
> context.textBaseline = 'middle';
>
> var label = document.getElementById(element.getAttribute('aria-labelledby'));
> var metrics = context.measureText(label.textContent);
>
> if(pathOnly) {
> var areaWidth = 15 + metrics.width;
> var areaHeight = 10;
> context.beginPath();
> context.rect(x-5, y-5, areaWidth, areaHeight);
> return;
> }
>
> context.beginPath();
> context.strokeStyle = 'black';
> context.rect(x-5, y-5, 10, 10);
> context.stroke();
> if (element.checked) {
> context.fillStyle = 'black';
> context.fill();
> }
> context.fillText(label.textContent, x+5, y);
>
> // Draw the Focus Ring
> var drawInvalidFocus = false;
>
> context.beginPath();
> context.rect(x-7, y-7, 12 + metrics.width+2, 14);
> context.strokeStyle = 'silver';
>
> //Draw a custom silver focus ring unless the focus ring conditions are invali
> d
>
> drawInvalidFocus = context.drawCustomFocusRing(element);
>
> // If the conditions are invalid for drawing a Custom Focus Ring draw red rin
> g, using the same coordiantes, to indicate the element was an invalid element fo
> r rendering focus
>
> if (drawInvalidFocus) {
> context.strokeStyle = 'red';
> context.stroke();
> }
> context.restore();
> }
>
> function drawBase() { /* ... */ }
> function drawAs() { /* ... */ }
> function drawBs() { /* ... */ }
> function redraw() {
> var canvas = document.getElementsByTagName('canvas')[0];
> var context = canvas.getContext('2d');
> var showA = document.getElementById('showA');
> var showB = document.getElementById('showB');
>
> context.clearRect(0, 0, canvas.width, canvas.height);
> drawCheckbox(context, showA, 20, 40);
> drawCheckbox(context, showB, 20, 60);
> drawBase();
> if (showA.checked) {
> drawAs();
> }
> if (showB.checked) {
> drawBs();
> }
> }
>
> function processMouseCoords(event,element) {
> var offsetLeft = 0, offsetTop = 0;
> while(element) {
> offsetLeft += element.offsetLeft >> 0;
> offsetTop += element.offsetTop >> 0;
> element = element.parentNode;
> }
> offsetLeft -= document.documentElement.scrollLeft;
> offsetTop -= document.documentElement.scrollTop;
> return { x: event.clientX - offsetLeft, y: event.clientY - offsetTop }
> }
>
> function processClick(event){
> var canvas = document.getElementById('example');
> var context = canvas.getContext('2d');
> var coords = processMouseCoords(event,canvas);
> var showA = document.getElementById('showA');
> var showB = document.getElementById('showB');
> var useRedraw = false;
> if(event.target.type == 'checkbox') {
> redraw();
> return;
> }
>
> drawCheckbox(context, showA, 20, 40, true);
> if (context.isPointInPath(coords.x, coords.y)) {
> showA.checked = !(showA.checked);
> showA.focus();
> document.activeElementFocus = showA;
> useRedraw = true;
> }
>
> drawCheckbox(context, showB, 20, 60, true);
> if (context.isPointInPath(coords.x, coords.y)) {
> showB.checked = !(showB.checked);
> document.activeElementFocus = showB;
> showB.focus();
> useRedraw = true;
> }
>
> if(!useRedraw &&
> (document.activeElementFocus != document.activeElement)) {
> document.activeElementFocus = document.activeElement;
> redraw();
> }
>
> if(useRedraw) redraw();
> }
>
> // Add the event listeners
> document.getElementById('showA').addEventListener('focus', redraw, true);
> document.getElementById('showB').addEventListener('focus', redraw, true);
> document.getElementById('showA').addEventListener('blur', redraw, true);
> document.getElementById('showB').addEventListener('blur', redraw, true);
> document.getElementById('example').addEventListener('change', redraw, true);
> document.getElementById('example').addEventListener('click', processClick, fals
> e);
> redraw();
> </script>
>
> The caret position is the rectangular left edge of the caret position
> within an element having focus. The selection position is the
> rectangular left or right edge of the highlighted position that moves
> in response to a users selection of content such as when dragging a
> pointing device during a content selection operation. The right edge is
> used when moving the selection position to the right and the left edge
> is used when moving the position to the left.
>
> 12 Text
>
> context . [366]font [ = value ]
> Returns the current font settings.
>
> Can be set, to change the font. The syntax is the same as for
> the CSS 'font' property; values that cannot be parsed as CSS
> font values are ignored.
>
> Relative keywords and lengths are computed relative to the font
> of the canvas element.
>
> context . [367]textAlign [ = value ]
> Returns the current text alignment settings.
>
> Can be set, to change the alignment. The possible values are
> start, end, left, right, and center. Other values are ignored.
> The default is start.
>
> context . [368]textBaseline [ = value ]
> Returns the current baseline alignment settings.
>
> Can be set, to change the baseline alignment. The possible
> values and their meanings are given below. Other values are
> ignored. The default is alphabetic.
>
> context . [369]fillText(text, x, y [, maxWidth ] )
> context . [370]strokeText(text, x, y [, maxWidth ] )
> Fills or strokes (respectively) the given text at the given
> position. If a maximum width is provided, the text will be
> scaled to fit that width if necessary.
>
> metrics = context . [371]measureText(text)
> Returns a [372]TextMetrics object with the metrics of the given
> text in the current font.
>
> metrics . [373]width
> Returns the advance width of the text that was passed to the
> [374]measureText() method.
>
> metrics . [375]baseline
> Returns the vertical offset of the anchor point for the text
> that was passed to the [376]measureText() method.
>
> The font IDL attribute, on setting, must be parsed the same way as the
> 'font' property of CSS (but without supporting property-independent
> style sheet syntax like 'inherit'), and the resulting font must be
> assigned to the context, with the 'line-height' component forced to
> 'normal', with the 'font-size' component converted to CSS pixels, and
> with system fonts being computed to explicit values. If the new value
> is syntactically incorrect (including using property-independent style
> sheet syntax like 'inherit' or 'initial'), then it must be ignored,
> without assigning a new font value. [377][CSS]
>
> Font names must be interpreted in the context of the canvas element's
> stylesheets; any fonts embedded using @font-face must therefore be
> available once they are loaded. (If a font is referenced before it is
> fully loaded, then it must be treated as if it was an unknown font,
> falling back to another as described by the relevant CSS
> specifications.) [378][CSSFONTS]
>
> Only vector fonts should be used by the user agent; if a user agent
> were to use bitmap fonts then transformations would likely make the
> font look very ugly.
>
> On getting, the [379]font attribute must return the serialized form of
> the current font of the context (with no 'line-height' component).
> [380][CSSOM]
>
> For example, after the following statement:
> context.font = 'italic 400 12px/2 Unknown Font, sans-serif';
>
> ...the expression context.font would evaluate to the string
> "italic 12px "Unknown Font", sans-serif". The "400" font-weight doesn't
> appear because that is the default value. The line-height doesn't
> appear because it is forced to "normal", the default value.
>
> When the context is created, the font of the context must be set to
> 10px sans-serif. When the 'font-size' component is set to lengths using
> percentages, 'em' or 'ex' units, or the 'larger' or 'smaller' keywords,
> these must be interpreted relative to the computed value of the
> 'font-size' property of the corresponding canvas element at the time
> that the attribute is set. When the 'font-weight' component is set to
> the relative values 'bolder' and 'lighter', these must be interpreted
> relative to the computed value of the 'font-weight' property of the
> corresponding canvas element at the time that the attribute is set. If
> the computed values are undefined for a particular case (e.g. because
> the canvas element is not in a Document), then the relative keywords
> must be interpreted relative to the normal-weight 10px sans-serif
> default.
>
> The textAlign IDL attribute, on getting, must return the current value.
> On setting, if the value is one of start, end, left, right, or center,
> then the value must be changed to the new value. Otherwise, the new
> value must be ignored. When the context is created, the [381]textAlign
> attribute must initially have the value start.
>
> The textBaseline IDL attribute, on getting, must return the current
> value. On setting, if the value is one of [382]top, [383]hanging,
> [384]middle, [385]alphabetic, [386]ideographic, or [387]bottom, then
> the value must be changed to the new value. Otherwise, the new value
> must be ignored. When the context is created, the [388]textBaseline
> attribute must initially have the value alphabetic.
>
> The [389]textBaseline attribute's allowed keywords correspond to
> alignment points in the font:
>
> The top of the em square is roughly at the top of the glyphs in a font,
> the hanging baseline is where some glyphs like आ are anchored, the
> middle is half-way between the top of the em square and the bottom of
> the em square, the alphabetic baseline is where characters like Á, ÿ,
> f, and Ω are anchored, the ideographic baseline is where glyphs like 私
> and 達 are anchored, and the bottom of the em square is roughly at the
> bottom of the glyphs in a font. The top and bottom of the bounding box
> can be far from these baselines, due to glyphs extending far outside
> the em square.
>
> The keywords map to these alignment points as follows:
>
> top
> The top of the em square
>
> hanging
> The hanging baseline
>
> middle
> The middle of the em square
>
> alphabetic
> The alphabetic baseline
>
> ideographic
> The ideographic baseline
>
> bottom
> The bottom of the em square
>
> The fillText() and strokeText() methods take three or four arguments,
> text, x, y, and optionally maxWidth, and render the given text at the
> given (x, y) coordinates ensuring that the text isn't wider than
> maxWidth if specified, using the current [390]font, [391]textAlign, and
> [392]textBaseline values. Specifically, when the methods are called,
> the user agent must run the following steps:
> 1. If maxWidth is present but less than or equal to zero, return
> without doing anything; abort these steps.
> 2. Let font be the current font of the context, as given by the
> [393]font attribute.
> 3. Replace all the space characters in text with U+0020 SPACE
> characters.
> 4. Form a hypothetical infinitely wide CSS line box containing a
> single inline box containing the text text, with all the properties
> at their initial values except the 'font' property of the inline
> box set to font and the 'direction' property of the inline box set
> to the directionality of the canvas element. [394][CSS]
> 5. If the maxWidth argument was specified and the hypothetical width
> of the inline box in the hypothetical line box is greater than
> maxWidth CSS pixels, then change font to have a more condensed font
> (if one is available or if a reasonably readable one can be
> synthesized by applying a horizontal scale factor to the font) or a
> smaller font, and return to the previous step.
> 6. Let the anchor point be a point on the inline box, determined by
> the [395]textAlign and [396]textBaseline values, as follows:
> Horizontal position:
>
> If [397]textAlign is left
> If [398]textAlign is start and the directionality of the canvas
> element is 'ltr'
>
> If [399]textAlign is end and the directionality of the canvas
> element is 'rtl'
> Let the anchor point's horizontal position be the left
> edge of the inline box.
>
> If [400]textAlign is right
> If [401]textAlign is end and the directionality of the canvas
> element is 'ltr'
>
> If [402]textAlign is start and the directionality of the canvas
> element is 'rtl'
> Let the anchor point's horizontal position be the right
> edge of the inline box.
>
> If [403]textAlign is center
> Let the anchor point's horizontal position be half way
> between the left and right edges of the inline box.
>
> Vertical position:
>
> If [404]textBaseline is [405]top
> Let the anchor point's vertical position be the top of the
> em box of the first available font of the inline box.
>
> If [406]textBaseline is [407]hanging
> Let the anchor point's vertical position be the hanging
> baseline of the first available font of the inline box.
>
> If [408]textBaseline is [409]middle
> Let the anchor point's vertical position be half way
> between the bottom and the top of the em box of the first
> available font of the inline box.
>
> If [410]textBaseline is [411]alphabetic
> Let the anchor point's vertical position be the alphabetic
> baseline of the first available font of the inline box.
>
> If [412]textBaseline is [413]ideographic
> Let the anchor point's vertical position be the
> ideographic baseline of the first available font of the
> inline box.
>
> If [414]textBaseline is [415]bottom
> Let the anchor point's vertical position be the bottom of
> the em box of the first available font of the inline box.
>
> 7. Paint the hypothetical inline box as the shape given by the text's
> glyphs, as transformed by the [416]current transformation matrix,
> and anchored and sized so that before applying the [417]current
> transformation matrix, the anchor point is at (x, y) and each CSS
> pixel is mapped to one coordinate space unit.
> For [418]fillText() [419]fillStyle must be applied to the glyphs
> and [420]strokeStyle must be ignored. For [421]strokeText() the
> reverse holds and [422]strokeStyle must be applied to the glyph
> outlines and [423]fillStyle must be ignored.
> Text is painted without affecting the current path, and is subject
> to [424]shadow effects, [425]global alpha, the [426]clipping
> region, and [427]global composition operators.
>
> The measureText() method takes one argument, text. When the method is
> invoked, the user agent must replace all the space characters in text
> with U+0020 SPACE characters, and then must form a hypothetical
> infinitely wide CSS line box containing a single inline box containing
> the text text, with all the properties at their initial values except
> the 'font' property of the inline element set to the current font of
> the context, as given by the [428]font attribute, and must then return
> a new [429]TextMetrics object with its [430]width attribute set to the
> width of that inline box, in CSS pixels and its [431]baseline attribute
> set to the anchor point's vertical position as determined by the
> current [432]textBaseline value, in CSS pixels. [433][CSS]
>
> The [434]TextMetrics interface is used for the objects returned from
> [435]measureText(). It has two attributes, width and baseline, which
> are set by the [436]measureText() method.
>
> Glyphs rendered using [437]fillText() and [438]strokeText() can spill
> out of the box given by the font size (the em square size) and the
> width returned by [439]measureText() (the text width). This version of
> the specification does not provide a way to obtain the bounding box
> dimensions of the text. If the text is to be rendered and removed, care
> needs to be taken to replace the entire area of the canvas that the
> clipping region covers, not just the box given by the em square height
> and measured text width and baseline.
>
> A future version of the 2D context API may provide a way to render
> fragments of documents, rendered using CSS, straight to the canvas.
> This would be provided in preference to a dedicated way of doing
> multiline layout.
>
> 13 Images
>
> To draw images onto the canvas, the drawImage method can be used.
>
> This method can be invoked with three different sets of arguments:
> * drawImage(image, dx, dy)
> * drawImage(image, dx, dy, dw, dh)
> * drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
>
> Each of those three can take either an HTMLImageElement, an
> HTMLCanvasElement, or an HTMLVideoElement for the image argument.
>
> context . [440]drawImage(image, dx, dy)
> context . [441]drawImage(image, dx, dy, dw, dh)
> context . [442]drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
> Draws the given image onto the canvas. The arguments are
> interpreted as follows:
>
> The sx and sy parameters give the x and y coordinates of the
> source rectangle; the sw and sh arguments give the width and
> height of the source rectangle; the dx and dy give the x and y
> coordinates of the destination rectangle; and the dw and dh
> arguments give the width and height of the destination
> rectangle.
>
> If the first argument isn't an img, canvas, or video element,
> throws a TYPE_MISMATCH_ERR exception. If the image has no image
> data, throws an INVALID_STATE_ERR exception. If the one of the
> source rectangle dimensions is zero, throws an INDEX_SIZE_ERR
> exception. If the image isn't yet fully decoded, then nothing is
> drawn.
>
> If not specified, the dw and dh arguments must default to the values of
> sw and sh, interpreted such that one CSS pixel in the image is treated
> as one unit in the canvas coordinate space. If the sx, sy, sw, and sh
> arguments are omitted, they must default to 0, 0, the image's intrinsic
> width in image pixels, and the image's intrinsic height in image
> pixels, respectively. If the image has no intrinsic dimensions, the
> concrete object size must be used instead, as determined using the CSS
> "[443]Concrete Object Size Resolution" algorithm, with the specified
> size having neither a definite width nor height, nor any additional
> contraints, the object's intrinsic properties being those of the image
> argument, and the default object size being the size of the canvas
> element. [444][CSSIMAGES]
>
> The image argument is an instance of either HTMLImageElement,
> HTMLCanvasElement, or HTMLVideoElement. If the image is null, the
> implementation must raise a TYPE_MISMATCH_ERR exception.
>
> If the image argument is an HTMLImageElement object that is not fully
> decodable, or if the image argument is an HTMLVideoElement object whose
> readyState attribute is either HAVE_NOTHING or HAVE_METADATA, then the
> implementation must return without drawing anything.
>
> If the image argument is an HTMLCanvasElement object with either a
> horizontal dimension or a vertical dimension equal to zero, then the
> implementation must raise an INVALID_STATE_ERR exception.
>
> The source rectangle is the rectangle whose corners are the four points
> (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).
>
> If one of the sw or sh arguments is zero, the implementation must raise
> an INDEX_SIZE_ERR exception.
>
> The destination rectangle is the rectangle whose corners are the four
> points (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).
>
> When [445]drawImage() is invoked, the region of the image specified by
> the source rectangle must be painted on the region of the canvas
> specified by the destination rectangle, after applying the [446]current
> transformation matrix to the points of the destination rectangle.
>
> The original image data of the source image must be used, not the image
> as it is rendered (e.g. width and height attributes on the source
> element have no effect). The image data must be processed in the
> original direction, even if the dimensions given are negative.
>
> This specification does not define the algorithm to use when scaling
> the image, if necessary.
>
> When a canvas is drawn onto itself, the [447]drawing model requires the
> source to be copied before the image is drawn back onto the canvas, so
> it is possible to copy parts of a canvas onto overlapping parts of
> itself.
>
> If the original image data is a bitmap image, the value painted at a
> point in the destination rectangle is computed by filtering the
> original image data. The user agent may use any filtering algorithm
> (for example bilinear interpolation or nearest-neighbor). When the
> filtering algorithm requires a pixel value from outside the original
> image data, it must instead use the value from the nearest edge pixel.
> (That is, the filter uses 'clamp-to-edge' behavior.)
>
> When the [448]drawImage() method is passed an animated image as its
> image argument, the user agent must use the poster frame of the
> animation, or, if there is no poster frame, the first frame of the
> animation.
>
> When the image argument is an HTMLVideoElement, then the frame at the
> current playback position must be used as the source image, and the
> source image's dimensions must be the intrinsic width and intrinsic
> height of the media resource (i.e. after any aspect-ratio correction
> has been applied).
>
> Images are painted without affecting the current path, and are subject
> to [449]shadow effects, [450]global alpha, the [451]clipping region,
> and [452]global composition operators.
>
> 14 Pixel manipulation
>
> imagedata = context . [453]createImageData(sw, sh)
> Returns an [454]ImageData object with the given dimensions in
> CSS pixels (which might map to a different number of actual
> device pixels exposed by the object itself). All the pixels in
> the returned object are transparent black.
>
> imagedata = context . [455]createImageData(imagedata)
> Returns an [456]ImageData object with the same dimensions as the
> argument. All the pixels in the returned object are transparent
> black.
>
> Throws a NOT_SUPPORTED_ERR exception if the argument is null.
>
> imagedata = context . [457]getImageData(sx, sy, sw, sh)
> Returns an [458]ImageData object containing the image data for
> the given rectangle of the canvas.
>
> Throws a NOT_SUPPORTED_ERR exception if any of the arguments are
> not finite. Throws an INDEX_SIZE_ERR exception if the either of
> the width or height arguments are zero.
>
> imagedata . [459]width
> imagedata . [460]height
> Returns the actual dimensions of the data in the [461]ImageData
> object, in device pixels.
>
> imagedata . [462]data
> Returns the one-dimensional array containing the data in RGBA
> order, as integers in the range 0 to 255.
>
> context . [463]putImageData(imagedata, dx, dy [, dirtyX, dirtyY,
> dirtyWidth, dirtyHeight ])
> Paints the data from the given [464]ImageData object onto the
> canvas. If a dirty rectangle is provided, only the pixels from
> that rectangle are painted.
>
> The [465]globalAlpha and [466]globalCompositeOperation
> attributes, as well as the shadow attributes, are ignored for
> the purposes of this method call; pixels in the canvas are
> replaced wholesale, with no composition, alpha blending, no
> shadows, etc.
>
> If the first argument is null, throws a TYPE_MISMATCH_ERR
> exception. Throws a NOT_SUPPORTED_ERR exception if any of the
> other arguments are not finite.
>
> The createImageData() method is used to instantiate new blank
> [467]ImageData objects. When the method is invoked with two arguments
> sw and sh, it must return an [468]ImageData object representing a
> rectangle with a width in CSS pixels equal to the absolute magnitude of
> sw and a height in CSS pixels equal to the absolute magnitude of sh.
> When invoked with a single imagedata argument, it must return an
> [469]ImageData object representing a rectangle with the same dimensions
> as the [470]ImageData object passed as the argument. The [471]ImageData
> object returned must be filled with transparent black.
>
> The getImageData(sx, sy, sw, sh) method must return an [472]ImageData
> object representing the underlying pixel data for the area of the
> canvas denoted by the rectangle whose corners are the four points (sx,
> sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh), in canvas coordinate
> space units. Pixels outside the canvas must be returned as transparent
> black. Pixels must be returned as non-premultiplied alpha values.
>
> If any of the arguments to [473]createImageData() or
> [474]getImageData() are infinite or NaN, or if the
> [475]createImageData() method is invoked with only one argument but
> that argument is null, the method must instead raise a
> NOT_SUPPORTED_ERR exception. If either the sw or sh arguments are zero,
> the method must instead raise an INDEX_SIZE_ERR exception.
>
> [476]ImageData objects must be initialized so that their width
> attribute is set to w, the number of physical device pixels per row in
> the image data, their height attribute is set to h, the number of rows
> in the image data, and their data attribute is initialized to a
> [477]CanvasPixelArray object holding the image data. At least one
> pixel's worth of image data must be returned.
>
> The [478]CanvasPixelArray object provides ordered, indexed access to
> the color components of each pixel of the image data. The data must be
> represented in left-to-right order, row by row top to bottom, starting
> with the top left, with each pixel's red, green, blue, and alpha
> components being given in that order for each pixel. Each component of
> each device pixel represented in this array must be in the range
> 0..255, representing the 8 bit value for that component. The components
> must be assigned consecutive indices starting with 0 for the top left
> pixel's red component.
>
> The [479]CanvasPixelArray object thus represents h×w×4 integers. The
> length attribute of a [480]CanvasPixelArray object must return this
> number.
>
> The object's supported property indices are the numbers in the range 0
> .. h×w×4-1.
>
> To determine the value of an indexed property index, the user agent
> must return the value of the indexth component in the array.
>
> To set the value of an existing indexed property index to value value,
> the value of the indexth component in the array must be set to value.
>
> The width and height (w and h) might be different from the sw and sh
> arguments to the above methods, e.g. if the canvas is backed by a
> high-resolution bitmap, or if the sw and sh arguments are negative.
>
> The putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth,
> dirtyHeight) method writes data from [481]ImageData structures back to
> the canvas.
>
> If any of the arguments to the method are infinite or NaN, the method
> must raise a NOT_SUPPORTED_ERR exception.
>
> If the first argument to the method is null, then the
> [482]putImageData() method must raise a TYPE_MISMATCH_ERR exception.
>
> When the last four arguments are omitted, they must be assumed to have
> the values 0, 0, the [483]width member of the imagedata structure, and
> the [484]height member of the imagedata structure, respectively.
>
> When invoked with arguments that do not, per the last few paragraphs,
> cause an exception to be raised, the [485]putImageData() method must
> act as follows:
> 1. Let dx[device] be the x-coordinate of the device pixel in the
> underlying pixel data of the canvas corresponding to the dx
> coordinate in the canvas coordinate space.
> Let dy[device] be the y-coordinate of the device pixel in the
> underlying pixel data of the canvas corresponding to the dy
> coordinate in the canvas coordinate space.
> 2. If dirtyWidth is negative, let dirtyX be dirtyX+dirtyWidth, and let
> dirtyWidth be equal to the absolute magnitude of dirtyWidth.
> If dirtyHeight is negative, let dirtyY be dirtyY+dirtyHeight, and
> let dirtyHeight be equal to the absolute magnitude of dirtyHeight.
> 3. If dirtyX is negative, let dirtyWidth be dirtyWidth+dirtyX, and let
> dirtyX be zero.
> If dirtyY is negative, let dirtyHeight be dirtyHeight+dirtyY, and
> let dirtyY be zero.
> 4. If dirtyX+dirtyWidth is greater than the [486]width attribute of
> the imagedata argument, let dirtyWidth be the value of that
> [487]width attribute, minus the value of dirtyX.
> If dirtyY+dirtyHeight is greater than the [488]height attribute of
> the imagedata argument, let dirtyHeight be the value of that
> [489]height attribute, minus the value of dirtyY.
> 5. If, after those changes, either dirtyWidth or dirtyHeight is
> negative or zero, stop these steps without affecting the canvas.
> 6. Otherwise, for all integer values of x and y where
> dirtyX ≤ x < dirtyX+dirtyWidth and dirtyY ≤ y < dirtyY+dirtyHeight,
> copy the four channels of the pixel with coordinate (x, y) in the
> imagedata data structure to the pixel with coordinate
> (dx[device]+x, dy[device]+y) in the underlying pixel data of the
> canvas.
>
> The handling of pixel rounding when the specified coordinates do not
> exactly map to the device coordinate space is not defined by this
> specification, except that the following must result in no visible
> changes to the rendering:
> context.putImageData(context.getImageData(x, y, w, h), p, q);
>
> ...for any value of x, y, w, and h and where p is the smaller of x and
> the sum of x and w, and q is the smaller of y and the sum of y and h;
> and except that the following two calls:
> context.createImageData(w, h);
> context.getImageData(0, 0, w, h);
>
> ...must return [490]ImageData objects with the same dimensions, for any
> value of w and h. In other words, while user agents may round the
> arguments of these methods so that they map to device pixel boundaries,
> any rounding performed must be performed consistently for all of the
> [491]createImageData(), [492]getImageData() and [493]putImageData()
> operations.
>
> Due to the lossy nature of converting to and from premultiplied alpha
> color values, pixels that have just been set using [494]putImageData()
> might be returned to an equivalent [495]getImageData() as different
> values.
>
> The current path, [496]transformation matrix, [497]shadow attributes,
> [498]global alpha, the [499]clipping region, and [500]global
> composition operator must not affect the [501]getImageData() and
> [502]putImageData() methods.
>
> The data returned by [503]getImageData() is at the resolution of the
> canvas backing store, which is likely to not be one device pixel to
> each CSS pixel if the display used is a high resolution display.
>
> In the following example, the script generates an [504]ImageData object
> so that it can draw onto it.
> // canvas is a reference to a <canvas> element
> var context = canvas.getContext('2d');
>
> // create a blank slate
> var data = context.createImageData(canvas.width, canvas.height);
>
> // create some plasma
> FillPlasma(data, 'green'); // green plasma
>
> // add a cloud to the plasma
> AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle
>
> // paint the plasma+cloud on the canvas
> context.putImageData(data, 0, 0);
>
> // support methods
> function FillPlasma(data, color) { ... }
> function AddCloud(data, x, y) { ... }
>
> Here is an example of using [505]getImageData() and [506]putImageData()
> to implement an edge detection filter.
> <!DOCTYPE HTML>
> <html>
> <head>
> <title>Edge detection demo</title>
> <script>
> var image = new Image();
> function init() {
> image.onload = demo;
> image.src = "image.jpeg";
> }
> function demo() {
> var canvas = document.getElementsByTagName('canvas')[0];
> var context = canvas.getContext('2d');
>
> // draw the image onto the canvas
> context.drawImage(image, 0, 0);
>
> // get the image data to manipulate
> var input = context.getImageData(0, 0, canvas.width, canvas.height);
>
> // get an empty slate to put the data into
> var output = context.createImageData(canvas.width, canvas.height);
>
> // alias some variables for convenience
> // notice that we are using input.width and input.height here
> // as they might not be the same as canvas.width and canvas.height
> // (in particular, they might be different on high-res displays)
> var w = input.width, h = input.height;
> var inputData = input.data;
> var outputData = output.data;
>
> // edge detection
> for (var y = 1; y < h-1; y += 1) {
> for (var x = 1; x < w-1; x += 1) {
> for (var c = 0; c < 3; c += 1) {
> var i = (y*w + x)*4 + c;
> outputData[i] = 127 + -inputData[i - w*4 - 4] - inputData[i - w*4]
> - inputData[i - w*4 + 4] +
> -inputData[i - 4] + 8*inputData[i]
> - inputData[i + 4] +
> -inputData[i + w*4 - 4] - inputData[i + w*4]
> - inputData[i + w*4 + 4];
> }
> outputData[(y*w + x)*4 + 3] = 255; // alpha
> }
> }
>
> // put the image data back after manipulation
> context.putImageData(output, 0, 0);
> }
> </script>
> </head>
> <body onload="init()">
> <canvas></canvas>
> </body>
> </html>
>
> 15 Drawing model
>
> When a shape or image is painted, user agents must follow these steps,
> in the order given (or act as if they do):
> 1. Render the shape or image onto an infinite transparent black
> bitmap, creating image A, as described in the previous sections.
> For shapes, the current fill, stroke, and line styles must be
> honored, and the stroke must itself also be subjected to the
> current transformation matrix.
> 2. [507]When shadows are drawn, render the shadow from image A, using
> the current shadow styles, creating image B.
> 3. [508]When shadows are drawn, multiply the alpha component of every
> pixel in B by [509]globalAlpha.
> 4. [510]When shadows are drawn, composite B within the [511]clipping
> region over the current canvas bitmap using the current composition
> operator.
> 5. Multiply the alpha component of every pixel in A by
> [512]globalAlpha.
> 6. Composite A within the [513]clipping region over the current canvas
> bitmap using the current composition operator.
>
> 16 Active Regions and Hit Testing
>
> This section is normative.
>
> The default hit testing behavior for canvas is to leave the process of
> hit testing to the author by having to apply event handlers for all
> pointer devices on the canvas element and doing hit testing on regions
> within the visual canvas rendering which would place the logic for
> processing this type of input at a location separate from the
> corresponding elements, in fallback content, that process the keyboard.
> Canvas also provides a means to allow the author to define active
> regions on the canvas that are bound to fallback content elements which
> have a one for one association with its visible counterpart on canvas.
> Canvas provides a number of methods to define and maintain these
> bindings.
>
> context . [514]setPathForElement(element, zIndex)
> Sets the path, representing the bounds of the element for the
> element with an optional zIndex if the element exists
>
> Returns false if the element does not exist. Otherwise, returns
> false.
>
> context . [515]clearPathForElement(element)
> Removes the path and zIndex associated with the element.
>
> context . [516]clearPathsForElements()
> Clears all paths bound to elements.
>
> The setPathForElement() method is used bind the current path to an
> element in canvas fallback content for the purposes of supporting a
> pointing devices hit testing of canvas fallback content rendered on the
> the physical canvas. The method is invoked with two arguments element
> and an optional zIndex. This path is representative of the bounds of
> the element. If the element is not in the DOM the method returns false.
> The [517]setPathForElement method also takes an optional z Index
> parameter which defines stack order of the positioned element on the
> canvas. The zIndex takes an integer value. If no zIndex value is
> provided the zIndex, a zIndex of zero is assigned for the element. If
> subsequent calls to [518]setPathForElement reference the same element
> for a given canvas context element's zIndex and path are replaced by
> the zIndex and path passed to the [519]setPathForElement method for
> that element in the associated canvas context. The processing of
> pointer events for a canvas context is defined in the [520]hit test and
> dispatch procedure.
>
> The clearPathForElement() method takes one argument element and is used
> to remove the path and zIndex associated with the element for the given
> canvas context. This effectively removes the element for participating
> in hit testing and no pointer events may be dispatched to to the
> element as a result of pointer events occuring within the canvas
> element drawing space.
>
> The clearPathsForElements() removes all paths and z Indices bound to
> elements for the given canvas context leaving the handling of all
> pointer to pointing device handlers bound directly to the canvas
> element.
>
> When a pointer event is received on the canvas element process the
> event for the associated canvas context using the following hit test
> and dispatch procedure:
> 1. Sort the list of path/element pairs according to zIndex
> 2. Starting with the path/element pairs having the highest zIndex
> 3. For the current zIndex find the first element where the pointer
> event position is within the associated path of the element
> 4. If the point is in the path of the element dispatch the pointer
> event to the element and return from processing
> 5. If there there is a collection of path/element pairs at the next
> lower zIndex move to the next lower zIndex and repeat the process
> of detecting if the pointer position is within an elements path
> 6. Process the pointer event by passing it to the associated event
> handlers for the canvas element
>
> 17 Examples
>
> This section is non-normative.
>
> Here is an example of a script that uses canvas to draw [521]pretty
> glowing lines.
> <canvas width="800" height="450"></canvas>
> <script>
>
> var context = document.getElementsByTagName('canvas')[0].getContext('2d');
>
> var lastX = context.canvas.width * Math.random();
> var lastY = context.canvas.height * Math.random();
> var hue = 0;
> function line() {
> context.save();
> context.translate(context.canvas.width/2, context.canvas.height/2);
> context.scale(0.9, 0.9);
> context.translate(-context.canvas.width/2, -context.canvas.height/2);
> context.beginPath();
> context.lineWidth = 5 + Math.random() * 10;
> context.moveTo(lastX, lastY);
> lastX = context.canvas.width * Math.random();
> lastY = context.canvas.height * Math.random();
> context.bezierCurveTo(context.canvas.width * Math.random(),
> context.canvas.height * Math.random(),
> context.canvas.width * Math.random(),
> context.canvas.height * Math.random(),
> lastX, lastY);
>
> hue = hue + 10 * Math.random();
> context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
> context.shadowColor = 'white';
> context.shadowBlur = 10;
> context.stroke();
> context.restore();
> }
> setInterval(line, 50);
>
> function blank() {
> context.fillStyle = 'rgba(0,0,0,0.1)';
> context.fillRect(0, 0, context.canvas.width, context.canvas.height);
> }
> setInterval(blank, 40);
>
> </script>
>
> References
>
> All references are normative unless marked "Non-normative".
>
> [BEZIER]
> Courbes à poles, P. de Casteljau. INPI, 1959.
>
> [CSS]
> [522]Cascading Style Sheets Level 2 Revision 1, B. Bos, T.
> Çelik, I. Hickson, H. Lie. W3C.
>
> [CSSCOLOR]
> [523]CSS Color Module Level 3, T. Çelik, C. Lilley, L. Baron.
> W3C.
>
> [CSSFONTS]
> [524]CSS Fonts Module Level 3, J. Daggett. W3C.
>
> [CSSIMAGES]
> [525]CSS Image Values and Replaced Content Module Level 3, E.
> Etemad, T. Atkins. W3C.
>
> [CSSOM]
> [526]Cascading Style Sheets Object Model (CSSOM), A. van
> Kesteren. W3C.
>
> [HTML5]
> [527]HTML5, I. Hickson. W3C.
>
> [PORTERDUFF]
> [528]Compositing Digital Images, T. Porter, T. Duff. In Computer
> graphics, volume 18, number 3, pp. 253-259. ACM Press, July
> 1984.
>
> [WEBIDL]
> [529]Web IDL, C. McCormack. W3C.
>
> Acknowledgements
>
> For a full list of acknowledgements, please see the HTML5
> specification. [530][HTML5]
>
> References
>
> 1. http://www.w3.org/
> 2. http://www.w3.org/TR/2011/LC-2dcontext-20110524/
> 3. http://www.w3.org/TR/2dcontext/
> 4. http://dev.w3.org/html5/2dcontext/
> 5. http://www.w3.org/TR/2011/WD-2dcontext-20110405/
> 6. http://www.w3.org/TR/2011/WD-2dcontext-20110113/
> 7. http://www.w3.org/TR/2010/WD-2dcontext-20101019/
> 8. http://www.w3.org/TR/2010/WD-2dcontext-20100624/
> 9. http://www.w3.org/TR/2010/WD-2dcontext-20100304/
> 10. http://www.w3.org/TR/2009/WD-html5-20090825/
> 11. http://www.w3.org/TR/2009/WD-html5-20090423/
> 12. http://www.w3.org/TR/2009/WD-html5-20090212/
> 13. http://www.w3.org/TR/2008/WD-html5-20080610/
> 14. http://www.w3.org/TR/2008/WD-html5-20080122/
> 15. mailto:ian@hixie.ch
> 16. http://www.w3.org/Consortium/Legal/ipr-notice#Copyright
> 17. http://www.w3.org/
> 18. http://www.csail.mit.edu/
> 19. http://www.ercim.org/
> 20. http://www.keio.ac.jp/
> 21. http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer
> 22. http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks
> 23. http://www.w3.org/Consortium/Legal/copyright-documents
> 24. http://www.whatwg.org/specs/web-apps/current-work/complete.html#2dcontext
> 25. http://www.w3.org/TR/
> 26. http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG
> 27. form field = text entry area
> 28. form field = text entry area
> 29. form field = text entry area
> 30. form field = text entry area
> 31. form field = text entry area
> 32. form field = text entry area
> 33. form field = text entry area
> 34. form field = text entry area
> 35. form field = text entry area
> 36. form field = text entry area
> 37. form field = submit button
> 38. mailto:public-html-comments@w3.org
> 39. mailto:public-html-comments-request@w3.org?subject=subscribe
> 40. http://lists.w3.org/Archives/Public/public-html-comments/
> 41. mailto:whatwg@whatwg.org
> 42. http://lists.whatwg.org/listinfo.cgi/whatwg-whatwg.org
> 43. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/
> 44. http://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&long_desc_type=allwordssubstr&long_desc=&bug_file_loc_type=allwordssubstr&bug_file_loc=&status_whiteboard_type=allwordssubstr&status_whiteboard=&keywords_type=allwords&keywords=&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&emailassigned_to1=1&emailtype1=exact&email1=ian%40hixie.ch&emailtype2=substring&email2=&bugidtype=include&bug_id=&votes=&chfieldfrom=&chfieldto=Now&chfieldvalue=&cmdtype=doit&order=Reuse+same+sort+as+last+time&field0-0-0=noop&type0-0-0=noop&value0-0-0=
> 45. http://www.w3.org/html/wg/tracker/products/1
> 46. http://www.whatwg.org/issues/
> 47. http://dev.w3.org/html5/
> 48. http://svn.whatwg.org/webapps/
> 49. http://www.whatwg.org/specs/web-apps/current-work/complete.html
> 50. http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F
> 51. http://lists.w3.org/Archives/Public/public-html-diffs/latest
> 52. http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org
> 53. http://twitter.com/HTML5
> 54. http://dev.w3.org/cvsweb/html5/
> 55. http://html5.org/tools/web-apps-tracker
> 56. http://www.w3.org/html/wg/
> 57. http://www.whatwg.org/
> 58. http://www.w3.org/2007/03/HTML-WG-charter
> 59. http://www.w3.org/Consortium/Patent-Policy-20040205/
> 60. http://www.w3.org/2004/01/pp-impl/40318/status
> 61. http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential
> 62. http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure
> 63. file://localhost/tmp/clickableregion.html#conformance-requirements
> 64. file://localhost/tmp/clickableregion.html#the-canvas-state
> 65. file://localhost/tmp/clickableregion.html#transformations
> 66. file://localhost/tmp/clickableregion.html#compositing
> 67. file://localhost/tmp/clickableregion.html#colors-and-styles
> 68. file://localhost/tmp/clickableregion.html#line-styles
> 69. file://localhost/tmp/clickableregion.html#shadows
> 70. file://localhost/tmp/clickableregion.html#simple-shapes-rectangles
> 71. file://localhost/tmp/clickableregion.html#complex-shapes-paths
> 72. file://localhost/tmp/clickableregion.html#focus-management
> 73. file://localhost/tmp/clickableregion.html#caret-selection
> 74. file://localhost/tmp/clickableregion.html#text
> 75. file://localhost/tmp/clickableregion.html#images
> 76. file://localhost/tmp/clickableregion.html#pixel-manipulation
> 77. file://localhost/tmp/clickableregion.html#drawing-model
> 78. file://localhost/tmp/clickableregion.html#active-region-and-hit-testing
> 79. file://localhost/tmp/clickableregion.html#examples
> 80. file://localhost/tmp/clickableregion.html#references
> 81. file://localhost/tmp/clickableregion.html#acknowledgements
> 82. file://localhost/tmp/clickableregion.html#refsHTML5
> 83. file://localhost/tmp/clickableregion.html#refsWEBIDL
> 84. file://localhost/tmp/clickableregion.html#canvasrenderingcontext2d
> 85. file://localhost/tmp/clickableregion.html#canvas-context-2d
> 86. file://localhost/tmp/clickableregion.html#canvasrenderingcontext2d
> 87. file://localhost/tmp/clickableregion.html#dom-context-2d-canvas
> 88. file://localhost/tmp/clickableregion.html#dom-context-2d-save
> 89. file://localhost/tmp/clickableregion.html#dom-context-2d-restore
> 90. file://localhost/tmp/clickableregion.html#dom-context-2d-scale
> 91. file://localhost/tmp/clickableregion.html#dom-context-2d-rotate
> 92. file://localhost/tmp/clickableregion.html#dom-context-2d-translate
> 93. file://localhost/tmp/clickableregion.html#dom-context-2d-transform
> 94. file://localhost/tmp/clickableregion.html#dom-context-2d-settransform
> 95. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 96. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 97. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 98. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 99. file://localhost/tmp/clickableregion.html#canvasgradient
> 100. file://localhost/tmp/clickableregion.html#dom-context-2d-createlineargradient
> 101. file://localhost/tmp/clickableregion.html#canvasgradient
> 102. file://localhost/tmp/clickableregion.html#dom-context-2d-createradialgradient
> 103. file://localhost/tmp/clickableregion.html#canvaspattern
> 104. file://localhost/tmp/clickableregion.html#dom-context-2d-createpattern
> 105. file://localhost/tmp/clickableregion.html#canvaspattern
> 106. file://localhost/tmp/clickableregion.html#dom-context-2d-createpattern
> 107. file://localhost/tmp/clickableregion.html#canvaspattern
> 108. file://localhost/tmp/clickableregion.html#dom-context-2d-createpattern
> 109. file://localhost/tmp/clickableregion.html#dom-context-2d-linewidth
> 110. file://localhost/tmp/clickableregion.html#dom-context-2d-linecap
> 111. file://localhost/tmp/clickableregion.html#dom-context-2d-linejoin
> 112. file://localhost/tmp/clickableregion.html#dom-context-2d-miterlimit
> 113. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsetx
> 114. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsety
> 115. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowblur
> 116. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowcolor
> 117. file://localhost/tmp/clickableregion.html#dom-context-2d-clearrect
> 118. file://localhost/tmp/clickableregion.html#dom-context-2d-fillrect
> 119. file://localhost/tmp/clickableregion.html#dom-context-2d-strokerect
> 120. file://localhost/tmp/clickableregion.html#dom-context-2d-beginpath
> 121. file://localhost/tmp/clickableregion.html#dom-context-2d-closepath
> 122. file://localhost/tmp/clickableregion.html#dom-context-2d-moveto
> 123. file://localhost/tmp/clickableregion.html#dom-context-2d-lineto
> 124. file://localhost/tmp/clickableregion.html#dom-context-2d-quadraticcurveto
> 125. file://localhost/tmp/clickableregion.html#dom-context-2d-beziercurveto
> 126. file://localhost/tmp/clickableregion.html#dom-context-2d-arcto
> 127. file://localhost/tmp/clickableregion.html#dom-context-2d-rect
> 128. file://localhost/tmp/clickableregion.html#dom-context-2d-arc
> 129. file://localhost/tmp/clickableregion.html#dom-context-2d-fill
> 130. file://localhost/tmp/clickableregion.html#dom-context-2d-stroke
> 131. file://localhost/tmp/clickableregion.html#dom-context-2d-clip
> 132. file://localhost/tmp/clickableregion.html#dom-context-2d-ispointinpath
> 133. file://localhost/tmp/clickableregion.html#dom-context-2d-drawSystemFocusRing
> 134. file://localhost/tmp/clickableregion.html#dom-context-2d-drawCustomFocusRing
> 135. file://localhost/tmp/clickableregion.html#dom-context-2d-caretBlinkRate
> 136. file://localhost/tmp/clickableregion.html#dom-context-2d-setCaretSelectionRect
> 137. file://localhost/tmp/clickableregion.html#dom-context-2d-setPathForElement
> 138. file://localhost/tmp/clickableregion.html#dom-context-2d-clearPathForElement
> 139. file://localhost/tmp/clickableregion.html#dom-context-2d-clearPathsForElements
> 140. file://localhost/tmp/clickableregion.html#dom-context-2d-font
> 141. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 142. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 143. file://localhost/tmp/clickableregion.html#dom-context-2d-filltext
> 144. file://localhost/tmp/clickableregion.html#dom-context-2d-stroketext
> 145. file://localhost/tmp/clickableregion.html#textmetrics
> 146. file://localhost/tmp/clickableregion.html#dom-context-2d-measuretext
> 147. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 148. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 149. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 150. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 151. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 152. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 153. file://localhost/tmp/clickableregion.html#imagedata
> 154. file://localhost/tmp/clickableregion.html#dom-context-2d-createimagedata
> 155. file://localhost/tmp/clickableregion.html#imagedata
> 156. file://localhost/tmp/clickableregion.html#dom-context-2d-createimagedata
> 157. file://localhost/tmp/clickableregion.html#imagedata
> 158. file://localhost/tmp/clickableregion.html#imagedata
> 159. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 160. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 161. file://localhost/tmp/clickableregion.html#imagedata
> 162. file://localhost/tmp/clickableregion.html#dom-canvasgradient-addcolorstop
> 163. file://localhost/tmp/clickableregion.html#dom-textmetrics-width
> 164. file://localhost/tmp/clickableregion.html#dom-textmetrics-width
> 165. file://localhost/tmp/clickableregion.html#dom-imagedata-width
> 166. file://localhost/tmp/clickableregion.html#dom-imagedata-height
> 167. file://localhost/tmp/clickableregion.html#canvaspixelarray
> 168. file://localhost/tmp/clickableregion.html#dom-imagedata-data
> 169. file://localhost/tmp/clickableregion.html#dom-canvaspixelarray-length
> 170. file://localhost/tmp/clickableregion.html#dom-canvaspixelarray-get
> 171. file://localhost/tmp/clickableregion.html#dom-canvaspixelarray-set
> 172. file://localhost/tmp/clickableregion.html#dom-context-2d-canvas
> 173. file://localhost/tmp/clickableregion.html#refsCSSCOLOR
> 174. file://localhost/tmp/clickableregion.html#dom-canvasgradient-addcolorstop
> 175. file://localhost/tmp/clickableregion.html#canvasgradient
> 176. file://localhost/tmp/clickableregion.html#refsCSSCOLOR
> 177. file://localhost/tmp/clickableregion.html#canvasgradient
> 178. file://localhost/tmp/clickableregion.html#canvasgradient
> 179. file://localhost/tmp/clickableregion.html#transformations
> 180. file://localhost/tmp/clickableregion.html#clipping-region
> 181. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 182. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 183. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 184. file://localhost/tmp/clickableregion.html#dom-context-2d-linewidth
> 185. file://localhost/tmp/clickableregion.html#dom-context-2d-linecap
> 186. file://localhost/tmp/clickableregion.html#dom-context-2d-linejoin
> 187. file://localhost/tmp/clickableregion.html#dom-context-2d-miterlimit
> 188. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsetx
> 189. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsety
> 190. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowblur
> 191. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowcolor
> 192. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 193. file://localhost/tmp/clickableregion.html#dom-context-2d-font
> 194. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 195. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 196. file://localhost/tmp/clickableregion.html#dom-context-2d-beginpath
> 197. file://localhost/tmp/clickableregion.html#dom-context-2d-save
> 198. file://localhost/tmp/clickableregion.html#dom-context-2d-restore
> 199. file://localhost/tmp/clickableregion.html#dom-context-2d-scale
> 200. file://localhost/tmp/clickableregion.html#dom-context-2d-rotate
> 201. file://localhost/tmp/clickableregion.html#dom-context-2d-translate
> 202. file://localhost/tmp/clickableregion.html#dom-context-2d-transform
> 203. file://localhost/tmp/clickableregion.html#dom-context-2d-settransform
> 204. file://localhost/tmp/clickableregion.html#dom-context-2d-transform
> 205. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 206. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 207. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 208. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 209. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 210. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 211. file://localhost/tmp/clickableregion.html#gcop-source-atop
> 212. file://localhost/tmp/clickableregion.html#gcop-source-in
> 213. file://localhost/tmp/clickableregion.html#gcop-source-out
> 214. file://localhost/tmp/clickableregion.html#gcop-source-over
> 215. file://localhost/tmp/clickableregion.html#drawing-model
> 216. file://localhost/tmp/clickableregion.html#clipping-region
> 217. file://localhost/tmp/clickableregion.html#refsPORTERDUFF
> 218. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 219. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 220. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 221. file://localhost/tmp/clickableregion.html#canvasgradient
> 222. file://localhost/tmp/clickableregion.html#canvaspattern
> 223. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 224. file://localhost/tmp/clickableregion.html#canvasgradient
> 225. file://localhost/tmp/clickableregion.html#canvaspattern
> 226. file://localhost/tmp/clickableregion.html#canvasgradient
> 227. file://localhost/tmp/clickableregion.html#canvaspattern
> 228. file://localhost/tmp/clickableregion.html#canvasgradient
> 229. file://localhost/tmp/clickableregion.html#canvaspattern
> 230. file://localhost/tmp/clickableregion.html#refsCSSCOLOR
> 231. file://localhost/tmp/clickableregion.html#canvasgradient
> 232. file://localhost/tmp/clickableregion.html#canvaspattern
> 233. file://localhost/tmp/clickableregion.html#canvaspattern
> 234. file://localhost/tmp/clickableregion.html#canvasgradient
> 235. file://localhost/tmp/clickableregion.html#serialization-of-a-color
> 236. file://localhost/tmp/clickableregion.html#canvasgradient
> 237. file://localhost/tmp/clickableregion.html#canvaspattern
> 238. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 239. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 240. file://localhost/tmp/clickableregion.html#canvasgradient
> 241. file://localhost/tmp/clickableregion.html#dom-canvasgradient-addcolorstop
> 242. file://localhost/tmp/clickableregion.html#dom-context-2d-createlineargradient
> 243. file://localhost/tmp/clickableregion.html#canvasgradient
> 244. file://localhost/tmp/clickableregion.html#dom-context-2d-createradialgradient
> 245. file://localhost/tmp/clickableregion.html#canvasgradient
> 246. file://localhost/tmp/clickableregion.html#canvasgradient
> 247. file://localhost/tmp/clickableregion.html#dom-context-2d-createlineargradient
> 248. file://localhost/tmp/clickableregion.html#canvasgradient
> 249. file://localhost/tmp/clickableregion.html#interpolation
> 250. file://localhost/tmp/clickableregion.html#transformations
> 251. file://localhost/tmp/clickableregion.html#canvasgradient
> 252. file://localhost/tmp/clickableregion.html#interpolation
> 253. file://localhost/tmp/clickableregion.html#transformations
> 254. file://localhost/tmp/clickableregion.html#canvaspattern
> 255. file://localhost/tmp/clickableregion.html#dom-context-2d-createpattern
> 256. file://localhost/tmp/clickableregion.html#canvaspattern
> 257. file://localhost/tmp/clickableregion.html#dom-context-2d-createpattern
> 258. file://localhost/tmp/clickableregion.html#canvaspattern
> 259. file://localhost/tmp/clickableregion.html#dom-context-2d-createpattern
> 260. file://localhost/tmp/clickableregion.html#dom-context-2d-linewidth
> 261. file://localhost/tmp/clickableregion.html#dom-context-2d-linecap
> 262. file://localhost/tmp/clickableregion.html#dom-context-2d-linejoin
> 263. file://localhost/tmp/clickableregion.html#dom-context-2d-miterlimit
> 264. file://localhost/tmp/clickableregion.html#dom-context-2d-linewidth
> 265. file://localhost/tmp/clickableregion.html#dom-context-2d-linecap
> 266. file://localhost/tmp/clickableregion.html#dom-context-2d-linejoin
> 267. file://localhost/tmp/clickableregion.html#dom-context-2d-linejoin
> 268. file://localhost/tmp/clickableregion.html#dom-context-2d-miterlimit
> 269. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowcolor
> 270. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsetx
> 271. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsety
> 272. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowblur
> 273. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowcolor
> 274. file://localhost/tmp/clickableregion.html#serialization-of-a-color
> 275. file://localhost/tmp/clickableregion.html#refsCSSCOLOR
> 276. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowblur
> 277. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowcolor
> 278. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowblur
> 279. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsetx
> 280. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsety
> 281. file://localhost/tmp/clickableregion.html#when-shadows-are-drawn
> 282. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsetx
> 283. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowoffsety
> 284. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowblur
> 285. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowblur
> 286. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowcolor
> 287. file://localhost/tmp/clickableregion.html#dom-context-2d-shadowcolor
> 288. file://localhost/tmp/clickableregion.html#drawing-model
> 289. file://localhost/tmp/clickableregion.html#gcop-copy
> 290. file://localhost/tmp/clickableregion.html#transformations
> 291. file://localhost/tmp/clickableregion.html#clipping-region
> 292. file://localhost/tmp/clickableregion.html#dom-context-2d-clearrect
> 293. file://localhost/tmp/clickableregion.html#shadows
> 294. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 295. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 296. file://localhost/tmp/clickableregion.html#dom-context-2d-clearrect
> 297. file://localhost/tmp/clickableregion.html#dom-context-2d-fillrect
> 298. file://localhost/tmp/clickableregion.html#dom-context-2d-strokerect
> 299. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 300. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 301. file://localhost/tmp/clickableregion.html#dom-context-2d-linewidth
> 302. file://localhost/tmp/clickableregion.html#dom-context-2d-linejoin
> 303. file://localhost/tmp/clickableregion.html#dom-context-2d-miterlimit
> 304. file://localhost/tmp/clickableregion.html#drawing-state
> 305. file://localhost/tmp/clickableregion.html#dom-context-2d-beginpath
> 306. file://localhost/tmp/clickableregion.html#dom-context-2d-moveto
> 307. file://localhost/tmp/clickableregion.html#dom-context-2d-closepath
> 308. file://localhost/tmp/clickableregion.html#dom-context-2d-lineto
> 309. file://localhost/tmp/clickableregion.html#dom-context-2d-quadraticcurveto
> 310. file://localhost/tmp/clickableregion.html#dom-context-2d-beziercurveto
> 311. file://localhost/tmp/clickableregion.html#dom-context-2d-arcto
> 312. file://localhost/tmp/clickableregion.html#dom-context-2d-arc
> 313. file://localhost/tmp/clickableregion.html#dom-context-2d-rect
> 314. file://localhost/tmp/clickableregion.html#dom-context-2d-fill
> 315. file://localhost/tmp/clickableregion.html#dom-context-2d-stroke
> 316. file://localhost/tmp/clickableregion.html#dom-context-2d-clip
> 317. file://localhost/tmp/clickableregion.html#dom-context-2d-ispointinpath
> 318. file://localhost/tmp/clickableregion.html#transformations
> 319. file://localhost/tmp/clickableregion.html#dom-context-2d-moveto
> 320. file://localhost/tmp/clickableregion.html#dom-context-2d-moveto
> 321. file://localhost/tmp/clickableregion.html#ensure-there-is-a-subpath
> 322. file://localhost/tmp/clickableregion.html#ensure-there-is-a-subpath
> 323. file://localhost/tmp/clickableregion.html#refsBEZIER
> 324. file://localhost/tmp/clickableregion.html#ensure-there-is-a-subpath
> 325. file://localhost/tmp/clickableregion.html#refsBEZIER
> 326. file://localhost/tmp/clickableregion.html#ensure-there-is-a-subpath
> 327. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 328. file://localhost/tmp/clickableregion.html#dom-context-2d-linewidth
> 329. file://localhost/tmp/clickableregion.html#dom-context-2d-linecap
> 330. file://localhost/tmp/clickableregion.html#dom-context-2d-linejoin
> 331. file://localhost/tmp/clickableregion.html#dom-context-2d-miterlimit
> 332. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 333. file://localhost/tmp/clickableregion.html#shadows
> 334. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 335. file://localhost/tmp/clickableregion.html#clipping-region
> 336. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 337. file://localhost/tmp/clickableregion.html#dom-context-2d-drawSystemFocusRing
> 338. file://localhost/tmp/clickableregion.html#dom-context-2d-drawCustomFocusRing
> 339. file://localhost/tmp/clickableregion.html#dom-context-2d-drawSystemFocusRing
> 340. file://localhost/tmp/clickableregion.html#dom-context-2d-drawCustomFocusRing
> 341. file://localhost/tmp/clickableregion.html#drawCustomFocusRingExample
> 342. file://localhost/tmp/clickableregion.html#inform
> 343. file://localhost/tmp/webappapis.html#event-loop
> 344. file://localhost/tmp/editing.html#dom-focus
> 345. file://localhost/tmp/clickableregion.html#shadows
> 346. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 347. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 348. file://localhost/tmp/clickableregion.html#clipping-region
> 349. file://localhost/tmp/clickableregion.html#shadows
> 350. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 351. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 352. file://localhost/tmp/clickableregion.html#clipping-region
> 353. file://localhost/tmp/clickableregion.html#inform
> 354. file://localhost/tmp/webappapis.html#event-loop
> 355. file://localhost/tmp/clickableregion.html#shadows
> 356. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 357. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 358. file://localhost/tmp/clickableregion.html#clipping-region
> 359. file://localhost/tmp/clickableregion.html#dom-context-2d-setCaretSelectionRect
> 360. file://localhost/tmp/clickableregion.html#caretpos
> 361. file://localhost/tmp/clickableregion.html#selectionpos
> 362. file://localhost/tmp/clickableregion.html#dom-context-2d-getblinkRate
> 363. file://localhost/tmp/clickableregion.html#dom-context-2d-setCaretSelectionRect
> 364. file://localhost/tmp/clickableregion.html#dom-context-2d-caretBlinkRate
> 365. file://localhost/tmp/clickableregion.html#transformations
> 366. file://localhost/tmp/clickableregion.html#dom-context-2d-font
> 367. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 368. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 369. file://localhost/tmp/clickableregion.html#dom-context-2d-filltext
> 370. file://localhost/tmp/clickableregion.html#dom-context-2d-stroketext
> 371. file://localhost/tmp/clickableregion.html#dom-context-2d-measuretext
> 372. file://localhost/tmp/clickableregion.html#textmetrics
> 373. file://localhost/tmp/clickableregion.html#dom-textmetrics-width
> 374. file://localhost/tmp/clickableregion.html#dom-context-2d-measuretext
> 375. file://localhost/tmp/clickableregion.html#dom-textmetrics-baseline
> 376. file://localhost/tmp/clickableregion.html#dom-context-2d-measuretext
> 377. file://localhost/tmp/clickableregion.html#refsCSS
> 378. file://localhost/tmp/clickableregion.html#refsCSSFONTS
> 379. file://localhost/tmp/clickableregion.html#dom-context-2d-font
> 380. file://localhost/tmp/clickableregion.html#refsCSSOM
> 381. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 382. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-top
> 383. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-hanging
> 384. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-middle
> 385. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-alphabetic
> 386. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-ideographic
> 387. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-bottom
> 388. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 389. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 390. file://localhost/tmp/clickableregion.html#dom-context-2d-font
> 391. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 392. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 393. file://localhost/tmp/clickableregion.html#dom-context-2d-font
> 394. file://localhost/tmp/clickableregion.html#refsCSS
> 395. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 396. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 397. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 398. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 399. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 400. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 401. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 402. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 403. file://localhost/tmp/clickableregion.html#dom-context-2d-textalign
> 404. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 405. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-top
> 406. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 407. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-hanging
> 408. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 409. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-middle
> 410. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 411. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-alphabetic
> 412. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 413. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-ideographic
> 414. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 415. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline-bottom
> 416. file://localhost/tmp/clickableregion.html#transformations
> 417. file://localhost/tmp/clickableregion.html#transformations
> 418. file://localhost/tmp/clickableregion.html#dom-context-2d-filltext
> 419. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 420. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 421. file://localhost/tmp/clickableregion.html#dom-context-2d-stroketext
> 422. file://localhost/tmp/clickableregion.html#dom-context-2d-strokestyle
> 423. file://localhost/tmp/clickableregion.html#dom-context-2d-fillstyle
> 424. file://localhost/tmp/clickableregion.html#shadows
> 425. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 426. file://localhost/tmp/clickableregion.html#clipping-region
> 427. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 428. file://localhost/tmp/clickableregion.html#dom-context-2d-font
> 429. file://localhost/tmp/clickableregion.html#textmetrics
> 430. file://localhost/tmp/clickableregion.html#dom-textmetrics-width
> 431. file://localhost/tmp/clickableregion.html#dom-textmetrics-baseline
> 432. file://localhost/tmp/clickableregion.html#dom-context-2d-textbaseline
> 433. file://localhost/tmp/clickableregion.html#refsCSS
> 434. file://localhost/tmp/clickableregion.html#textmetrics
> 435. file://localhost/tmp/clickableregion.html#dom-context-2d-measuretext
> 436. file://localhost/tmp/clickableregion.html#dom-context-2d-measuretext
> 437. file://localhost/tmp/clickableregion.html#dom-context-2d-filltext
> 438. file://localhost/tmp/clickableregion.html#dom-context-2d-stroketext
> 439. file://localhost/tmp/clickableregion.html#dom-context-2d-measuretext
> 440. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 441. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 442. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 443. http://dev.w3.org/csswg/css3-images/#default-sizing
> 444. file://localhost/tmp/clickableregion.html#refsCSSIMAGES
> 445. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 446. file://localhost/tmp/clickableregion.html#transformations
> 447. file://localhost/tmp/clickableregion.html#drawing-model
> 448. file://localhost/tmp/clickableregion.html#dom-context-2d-drawimage
> 449. file://localhost/tmp/clickableregion.html#shadows
> 450. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 451. file://localhost/tmp/clickableregion.html#clipping-region
> 452. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 453. file://localhost/tmp/clickableregion.html#dom-context-2d-createimagedata
> 454. file://localhost/tmp/clickableregion.html#imagedata
> 455. file://localhost/tmp/clickableregion.html#dom-context-2d-createimagedata
> 456. file://localhost/tmp/clickableregion.html#imagedata
> 457. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 458. file://localhost/tmp/clickableregion.html#imagedata
> 459. file://localhost/tmp/clickableregion.html#dom-imagedata-width
> 460. file://localhost/tmp/clickableregion.html#dom-imagedata-height
> 461. file://localhost/tmp/clickableregion.html#imagedata
> 462. file://localhost/tmp/clickableregion.html#dom-imagedata-data
> 463. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 464. file://localhost/tmp/clickableregion.html#imagedata
> 465. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 466. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 467. file://localhost/tmp/clickableregion.html#imagedata
> 468. file://localhost/tmp/clickableregion.html#imagedata
> 469. file://localhost/tmp/clickableregion.html#imagedata
> 470. file://localhost/tmp/clickableregion.html#imagedata
> 471. file://localhost/tmp/clickableregion.html#imagedata
> 472. file://localhost/tmp/clickableregion.html#imagedata
> 473. file://localhost/tmp/clickableregion.html#dom-context-2d-createimagedata
> 474. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 475. file://localhost/tmp/clickableregion.html#dom-context-2d-createimagedata
> 476. file://localhost/tmp/clickableregion.html#imagedata
> 477. file://localhost/tmp/clickableregion.html#canvaspixelarray
> 478. file://localhost/tmp/clickableregion.html#canvaspixelarray
> 479. file://localhost/tmp/clickableregion.html#canvaspixelarray
> 480. file://localhost/tmp/clickableregion.html#canvaspixelarray
> 481. file://localhost/tmp/clickableregion.html#imagedata
> 482. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 483. file://localhost/tmp/clickableregion.html#dom-imagedata-width
> 484. file://localhost/tmp/clickableregion.html#dom-imagedata-height
> 485. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 486. file://localhost/tmp/clickableregion.html#dom-imagedata-width
> 487. file://localhost/tmp/clickableregion.html#dom-imagedata-width
> 488. file://localhost/tmp/clickableregion.html#dom-imagedata-height
> 489. file://localhost/tmp/clickableregion.html#dom-imagedata-height
> 490. file://localhost/tmp/clickableregion.html#imagedata
> 491. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 492. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 493. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 494. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 495. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 496. file://localhost/tmp/clickableregion.html#transformations
> 497. file://localhost/tmp/clickableregion.html#shadows
> 498. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 499. file://localhost/tmp/clickableregion.html#clipping-region
> 500. file://localhost/tmp/clickableregion.html#dom-context-2d-globalcompositeoperation
> 501. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 502. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 503. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 504. file://localhost/tmp/clickableregion.html#imagedata
> 505. file://localhost/tmp/clickableregion.html#dom-context-2d-getimagedata
> 506. file://localhost/tmp/clickableregion.html#dom-context-2d-putimagedata
> 507. file://localhost/tmp/clickableregion.html#when-shadows-are-drawn
> 508. file://localhost/tmp/clickableregion.html#when-shadows-are-drawn
> 509. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 510. file://localhost/tmp/clickableregion.html#when-shadows-are-drawn
> 511. file://localhost/tmp/clickableregion.html#clipping-region
> 512. file://localhost/tmp/clickableregion.html#dom-context-2d-globalalpha
> 513. file://localhost/tmp/clickableregion.html#clipping-region
> 514. file://localhost/tmp/clickableregion.html#dom-context-2d-setPathForElement
> 515. file://localhost/tmp/clickableregion.html#dom-context-2d-clearPathForElement
> 516. file://localhost/tmp/clickableregion.html#dom-context-2d-clearPathsForElements
> 517. file://localhost/tmp/clickableregion.html#dom-context-2d-setPathForElement
> 518. file://localhost/tmp/clickableregion.html#dom-context-2d-setPathForElement
> 519. file://localhost/tmp/clickableregion.html#dom-context-2d-setPathForElement
> 520. file://localhost/tmp/clickableregion.html#hittest-dispatch
> 521. data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUw%2BDQo8aHRtbCBsYW5nPSJlbiI%2BDQogPGhlYWQ%2BDQogIDx0aXRsZT5QcmV0dHkgR2xvd2luZyBMaW5lczwvdGl0bGU%2BDQogPC9oZWFkPg0KIDxib2R5Pg0KPGNhbnZhcyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQ1MCI%2BPC9jYW52YXM%2BDQo8c2NyaXB0Pg0KDQogdmFyIGNvbnRleHQgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnY2FudmFzJylbMF0uZ2V0Q29udGV4dCgnMmQnKTsNCg0KIHZhciBsYXN0WCA9IGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKTsNCiB2YXIgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KIHZhciBodWUgPSAwOw0KIGZ1bmN0aW9uIGxpbmUoKSB7DQogICBjb250ZXh0LnNhdmUoKTsNCiAgIGNvbnRleHQudHJhbnNsYXRlKGNvbnRleHQuY2FudmFzLndpZHRoLzIsIGNvbnRleHQuY2FudmFzLmhlaWdodC8yKTsNCiAgIGNvbnRleHQuc2NhbGUoMC45LCAwLjkpOw0KICAgY29udGV4dC50cmFuc2xhdGUoLWNvbnRleHQuY2FudmFzLndpZHRoLzIsIC1jb250ZXh0LmNhbnZhcy5oZWlnaHQvMik7DQogICBjb250ZXh0LmJlZ2luUGF0aCgpOw0KICAgY29udGV4dC5saW5lV2lkdGggPSA1ICsgTWF0aC5yYW5kb20oKSAqIDEwOw0KICAgY29udGV4dC5tb3ZlVG8obGFzdFgsIGxhc3RZKTsNCiAgIGxhc3RYID0gY29udGV4dC5jYW52YXMud2lkdGggKiBNYXRoLnJhbmRvbSgpO> w0KICAgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KICAgY29udGV4dC5iZXppZXJDdXJ2ZVRvKGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGxhc3RYLCBsYXN0WSk7DQoNCiAgIGh1ZSA9IGh1ZSArIDEwICogTWF0aC5yYW5kb20oKTsNCiAgIGNvbnRleHQuc3Ryb2tlU3R5bGUgPSAnaHNsKCcgKyBodWUgKyAnLCA1MCUsIDUwJSknOw0KICAgY29udGV4dC5zaGFkb3dDb2xvciA9ICd3aGl0ZSc7DQogICBjb250ZXh0LnNoYWRvd0JsdXIgPSAxMDsNCiAgIGNvbnRleHQuc3Ryb2tlKCk7DQogICBjb250ZXh0LnJlc3RvcmUoKTsNCiB9DQogc2V0SW50ZXJ2YWwobGluZSwgNTApOw0KDQogZnVuY3Rpb24gYmxhbmsoKSB7DQogICBjb250ZXh0LmZpbGxTdHlsZSA9ICdyZ2JhKDAsMCwwLDAuMSknOw0KICAgY29udGV4dC5maWxsUmVjdCgwLCAwLCBjb250ZXh0LmNhbnZhcy53aWR0aCwgY29udGV4dC5jYW52YXMuaGVpZ2h0KTsNCiB9DQogc2V0SW50ZXJ2YWwoYmxhbmssIDQwKTsNCg0KPC9zY3JpcHQ%2BDQ> ogPC9ib2R5Pg0KPC9odG1sPg0K
> 522. http://www.w3.org/TR/CSS/
> 523. http://dev.w3.org/csswg/css3-color/
> 524. http://www.w3.org/TR/css3-fonts/
> 525. http://dev.w3.org/csswg/css3-images/
> 526. http://dev.w3.org/csswg/cssom/
> 527. http://dev.w3.org/html5/spec/
> 528. http://keithp.com/~keithp/porterduff/p253-porter.pdf
> 529. http://dev.w3.org/2006/webapi/WebIDL/
> 530. file://localhost/tmp/clickableregion.html#refsHTML5
--
Janina Sajka, Phone: +1.443.300.2200
sip:janina@asterisk.rednote.net
Chair, Open Accessibility janina@a11y.org
Linux Foundation http://a11y.org
Chair, Protocols & Formats
Web Accessibility Initiative http://www.w3.org/wai/pf
World Wide Web Consortium (W3C)
Received on Friday, 28 October 2011 00:38:51 UTC