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,151 @@ 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.
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 +2430,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 @@ -2887,17 +2922,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');