Re: draft of hit testing on active regions (actually paths) in canvas

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