Index: Overview.html =================================================================== RCS file: /sources/public/html5/spec/Overview.html,v retrieving revision 1.4851 diff -u -8 -d -p -r1.4851 Overview.html --- Overview.html 28 Apr 2011 22:33:47 -0000 1.4851 +++ Overview.html 29 Apr 2011 19:52:56 -0000 @@ -335,17 +335,17 @@ document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms'; fixBrokenLink(); }
This specification is available in the following formats: single page HTML, multipage HTML, web developer edition. - This is revision $Revision: 1.4851 $. + This is revision $Revision: 1.7 $.
Copyright © 2010 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark @@ -478,17 +478,17 @@
svn checkout http://svn.whatwg.org/webapps/
The W3C HTML Working Group is the W3C working group responsible for this specification's progress along the W3C Recommendation track. - This specification is the 28 April 2011 Editor's Draft. + This specification is the 29 April 2011 Editor's Draft.
Work on this specification is also done at the WHATWG. The W3C HTML working group actively pursues convergence with the WHATWG, as required by the W3C HTML working group charter.
This document was produced by a group operating under the 5
February 2004 W3C Patent Policy. W3C maintains a 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 Essential
@@ -1093,17 +1093,18 @@
Navigator
object
hidden
attribute
tabindex
attribute
interface Navigator { // objects implementing this interface also implement the interfaces given below }; Navigator implements NavigatorID; Navigator implements NavigatorOnLine; Navigator implements NavigatorContentUtils; -Navigator implements NavigatorStorageUtils;
These interfaces are defined separately so that other
specifications can re-use parts of the Navigator
interface.
The yieldForStorageUpdates()
method, when invoked, must, if the storage mutex is
owned by the event loop of the task that resulted in the method being
called, release the storage mutex so that it is once
again free. Otherwise, it must do nothing.
Exposing the information mentioned in this + section increases the ease with which authors can fingerprint users + across sites even in the absence of third-party cookies or other + intentionally unique identifiers. Implementors are encouraged to + very carefully consider the implications of implementing these + features.
[Supplemental, NoInterfaceObject] +interface NavigatorUserPreferences { + readonly attribute long caretBlinkPeriod; +};
navigator
. caretBlinkPeriod
()Returns the time in milliseconds between caret blinks, or zero + if the caret does not blink.
+ +Many visual platforms present the user's current location during + text editing using a blinking caret: a graphic, typically a bar or + I-beam, alternates between being visible and being invisible. + Typically, this blink rate is user-configurable; some users might + be adversely affected by a rapid blink rate (for example it can + induce an epileptic seizure), while others prefer a rapid rate as + it more quickly lets them determine the location of the caret.
+ +The caretBlinkPeriod
+ attribute should return the sum of the time, in milliseconds, that
+ such a caret spends visibile and invisible in a single blink cycle,
+ if the platform conventions are such that the caret blinks in a
+ manner similar to that described above. On platforms where a caret
+ does not blink or is otherwise not adequately described by a blink
+ period, the attribute should return zero.
+
+ On platforms where the user agent cannot determine the
+ blink period and cannot provide a default blink period, the
+ attribute should return −1.
+
hidden
attributeAll HTML elements may have the hidden
content attribute set. The hidden
attribute is a boolean
attribute. When specified on an element, it indicates that
the element is not yet, or is no longer, relevant. User agents should not render elements that have the
hidden
attribute
specified.
In the following skeletal example, the attribute is used to hide the Web game's main screen until the user logs in:
Index: Overview.html =================================================================== RCS file: /sources/public/html5/2dcontext/Overview.html,v retrieving revision 1.106 diff -u -8 -d -p -r1.106 Overview.html --- Overview.html 29 Apr 2011 19:35:30 -0000 1.106 +++ Overview.html 29 Apr 2011 19:52:59 -0000 @@ -492,21 +492,22 @@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.
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.
drawFocusRing
(element, x, y, [ canDrawCustom ])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,163 @@ 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:
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.
Transform the given point (x, y) according to the current transformation - matrix.
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.)
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.
Optionally, inform the user that the focus is at the location + given by the path. (For example, this could involve moving the + user's magnification tool.) 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.
+ +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>-
font
[ = value ]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:
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.
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).
Optionally, inform the user that the caret and/or selection + cover the specified rectangle of the canvas. + (For example, this could involve moving the user's magnification + tool.) User agents may wait until the next time the event + loop reaches its "update the rendering" step to optionally + inform the user.
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 +2442,17 @@ interface CanA 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.
To draw images onto the canvas, the drawImage
method
+ way of doing multiline layout.
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.
drawImage
(image, dx, dy)drawImage
(image, dx, dy, dw, dh)Images are painted without affecting the current path, and are subject to shadow effects, global alpha, the clipping region, and global composition operators.
-createImageData
(sw, sh)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.
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 +2941,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.
This section is non-normative.
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');