7.1 The hidden attribute
7.2 Activation
7.3 Focus
1. 7.3.1 Sequential focus navigation and the tabindex attribute
2. 7.3.2 Focus management
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. [HTML5]
Interfaces are defined in terms of Web IDL. [WEBIDL]
This specification defines the 2d context type, whose API is implemented using the CanvasRenderingContext2D interface.
@@ -571,18 +572,19 @@ void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius); void rect(in double x, in double y, in double w, in double h); void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise); void fill(); void stroke(); void clip(); boolean isPointInPath(in double x, in double y); - // focus management - boolean drawFocusRing(in Element element, in double xCaret, in double yCaret, in optional boolean canDrawCustom); + // focus and selection management + boolean drawFocusRing(in Element element, in optional boolean canDrawCustom); + void setCaretSelectionPos(in Element element, in double x, in double y, in double w, in double h); // text attribute DOMString font; // (default 10px sans-serif) attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start") attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic") void fillText(in DOMString text, in double x, in double y, in optional double maxWidth); void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth); TextMetrics measureText(in DOMString text); @@ -1930,27 +1932,23 @@ interface Can
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 the drawFocusRing() method, passing it the element for which a ring is being drawn. This method only draws the focus ring if the element is focused, so that it can simply be called whenever drawing the element, without checking - whether the element is focused or not first. The position of the - center of the control, or of the editing caret if the control has - one, should be given in the x and y arguments.
shouldDraw = context . drawFocusRing(element, x, y, [ canDrawCustom ])
+ whether the element is focused or not first.
shouldDraw = context . drawFocusRing(element, [ canDrawCustom ])

If the given element is focused, draws a focus ring around the current path, following the platform conventions for focus - rings. The given coordinate is used if the user's attention needs - to be brought to a particular position (e.g. if a magnifier is - following the editing caret in a text field).
+ rings.

If the canDrawCustom argument is true, then the focus ring is only drawn if the user has configured his system to draw focus rings in a particular manner. (For example, high contrast focus rings.)

Returns true if the given element is focused, the canDrawCustom argument is true, and the user has not configured his system to draw focus rings in a particular @@ -1958,114 +1956,165 @@ interface Can
When the method returns true, the author is expected to manually draw a focus ring.
-
The drawFocusRing(element, x, y, [canDrawCustom]) - method, when invoked, must run the following steps:
+
The drawFocusRing(element, [canDrawCustom]) method, when invoked, + must run the following steps:
1. If element is not focused or is not a descendant of the element with whose context the method is associated, then return false and abort these steps.
2. Transform the given point (x, y) according to the current transformation - matrix.
3. Optionally, inform the user that the focus is at the given - (transformed) coordinate on the canvas. (For example, this could - involve moving the user's magnification tool.)
4. If the user has requested the use of particular focus rings (e.g. high-contrast focus rings), or if the canDrawCustom argument is absent or false, then draw a focus ring of the appropriate style along the path, following platform conventions, return false, and abort these steps.
  
  The focus ring should not be subject to the shadow effects, the global alpha, or the global composition operators, but should be subject to the clipping region.
5. + +
  Optionally, inform the user that the focus is at the location + given by the path. (For example, this could calling a system + accessibility API, which would notify assistive technologies such + as magnification tools.) User agents may wait until the next time + the event loop reaches its "update the rendering" + step to optionally inform the user.
  + +
  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. This method is + 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.
  + +
6. Return true.
This canvas element has a couple of checkboxes:
```
<canvas height=400 width=750>
  <label><input type=checkbox id=showA> Show As</label>
  <label><input type=checkbox id=showB> Show Bs</label>
  
 </canvas>
 <script>
- function drawCheckbox(context, element, x, y) {
+ function drawCheckbox(context, element, x, y, paint) {
    context.save();
    context.font = '10px sans-serif';
    context.textAlign = 'left';
    context.textBaseline = 'middle';
    var metrics = context.measureText(element.labels[0].textContent);
-   context.beginPath();
-   context.strokeStyle = 'black';
-   context.rect(x-5, y-5, 10, 10);
-   context.stroke();
-   if (element.checked) {
-     context.fillStyle = 'black';
-     context.fill();
+   if (paint) {
+     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(element.labels[0].textContent, x+5, y);
    }
-   context.fillText(element.labels[0].textContent, x+5, y);
    context.beginPath();
    context.rect(x-7, y-7, 12 + metrics.width+2, 14);
-   if (context.drawFocusRing(element, x, y, true)) {
+   if (paint && context.drawFocusRing(element, true)) {
      context.strokeStyle = 'silver';
      context.stroke();
    }
    context.restore();
  }
  function drawBase() { /* ... */ }
  function drawAs() { /* ... */ }
  function drawBs() { /* ... */ }
  function redraw() {
    var canvas = document.getElementsByTagName('canvas')[0];
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
-   drawCheckbox(context, document.getElementById('showA'), 20, 40);
-   drawCheckbox(context, document.getElementById('showB'), 20, 60);
+   drawCheckbox(context, document.getElementById('showA'), 20, 40, true);
+   drawCheckbox(context, document.getElementById('showB'), 20, 60, true);
    drawBase();
    if (document.getElementById('showA').checked)
      drawAs();
    if (document.getElementById('showB').checked)
      drawBs();
  }
  function processClick(event) {
    var canvas = document.getElementsByTagName('canvas')[0];
    var context = canvas.getContext('2d');
-   var x = event.clientX - canvas.offsetLeft;
-   var y = event.clientY - canvas.offsetTop;
-   drawCheckbox(context, document.getElementById('showA'), 20, 40);
+   var x = event.clientX;
+   var y = event.clientY;
+   while (node) {
+     x -= node.offsetLeft - node.scrollLeft;
+     y -= node.offsetTop - node.scrollTop;
+     node = node.offsetParent;
+   }
+   drawCheckbox(context, document.getElementById('showA'), 20, 40, false);
    if (context.isPointInPath(x, y))
      document.getElementById('showA').checked = !(document.getElementById('showA').checked);
-   drawCheckbox(context, document.getElementById('showB'), 20, 60);
+   drawCheckbox(context, document.getElementById('showB'), 20, 60, false);
    if (context.isPointInPath(x, y))
      document.getElementById('showB').checked = !(document.getElementById('showB').checked);
    redraw();
  }
  document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
  document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
  document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
  document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
  redraw();
 </script>
```
-
11 Text
context . font [ = value ]
+
11 Selection management
context . setCaretSelectionPos(element, x, y, w, h)
+ +
+ +
If the given element is focused, notifies the platform's + accessibilty subsystem that the given element's caret and/or + selection cover the given rectangle.
+ +
+ +
+ +
The setCaretSelectionPos(element, x, w, h) method, when + invoked, must run the following steps:
+ +
1. If element is not focused or is not a + descendant of the element with whose context the method is + associated, then return false and abort these steps.
2. Apply the current transformation + matrix to the following four coordinates, which form a path + that must then be closed to get the specified + rectangle: (x, y), (x+w, y), (x+w, y+h), (x, y+h).
3. Optionally, inform the user that the caret and/or selection + cover the specified rectangle of the canvas. + (For example, this could calling a system accessibility API, which + would notify assistive technologies such as magnification tools.) + User agents may wait until the next time the event + loop reaches its "update the rendering" step to optionally + inform the user.
12 Text
context . 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.
@@ -2395,17 +2444,17 @@ interface Can
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.
12 Images
To draw images onto the canvas, the drawImage method + 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 . drawImage(image, dx, dy)

context . drawImage(image, dx, dy, dw, dh)
@@ -2516,17 +2565,17 @@ interface Can 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 shadow effects, global alpha, the clipping region, and global composition operators.
-
13 Pixel manipulation
imagedata = context . createImageData(sw, sh)
+
14 Pixel manipulation
imagedata = context . createImageData(sw, sh)

Returns an 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.
@@ -2866,17 +2915,17 @@ function AddCloud(data, x, y) { ... }

-
14 Drawing model
+
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):

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 @@ -2894,17 +2943,17 @@ function AddCloud(data, x, y) { ... }

Multiply the alpha component of every pixel in A by globalAlpha.

Composite A within the clipping region over the current canvas bitmap using the current composition operator.
-
15 Examples
This section is non-normative.
+

16 Examples

This section is non-normative.

Here is an example of a script that uses canvas to draw pretty glowing lines.

<canvas width="800" height="450"></canvas>
 <script>
 
  var context = document.getElementsByTagName('canvas')[0].getContext('2d');

6.5.4 Obtaining system settings and the user's platform preferences

7 User interaction

7.1 The `hidden` attribute

HTML Canvas 2D Context

Editor's Draft 4 May 2011

Editor's Draft 5 May 2011

1 Conformance requirements

10 Focus management

11 Text

11 Selection management

12 Text

12 Images

13 Images

13 Pixel manipulation

14 Pixel manipulation

14 Drawing model

15 Drawing model

15 Examples

16 Examples

6.5.4 Obtaining system settings and the user's platform preferences

7 User interaction

7.1 The hidden attribute

HTML Canvas 2D Context

Editor's Draft 4 May 2011

Editor's Draft 5 May 2011

1 Conformance requirements

10 Focus management

11 Text

11 Selection management

12 Text

12 Images

13 Images

13 Pixel manipulation

14 Pixel manipulation

14 Drawing model

15 Drawing model

15 Examples

16 Examples

7.1 The `hidden` attribute