You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3272 lines
197 KiB
3272 lines
197 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="en-US-x-Hixie"><title>HTML Canvas 2D Context</title><style type="text/css">
|
|
pre { margin-left: 2em; white-space: pre-wrap; }
|
|
h2 { margin: 3em 0 1em 0; }
|
|
h3 { margin: 2.5em 0 1em 0; }
|
|
h4 { margin: 2.5em 0 0.75em 0; }
|
|
h5, h6 { margin: 2.5em 0 1em; }
|
|
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
|
|
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
|
|
p { margin: 1em 0; }
|
|
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
|
|
dl, dd { margin-top: 0; margin-bottom: 0; }
|
|
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
|
|
dt + dt { margin-top: 0; }
|
|
dd dt { margin-top: 0.25em; margin-bottom: 0; }
|
|
dd p { margin-top: 0; }
|
|
dd dl + p { margin-top: 1em; }
|
|
dd table + p { margin-top: 1em; }
|
|
p + * > li, dd li { margin: 1em 0; }
|
|
dt, dfn { font-weight: bold; font-style: normal; }
|
|
dt dfn { font-style: italic; }
|
|
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
|
|
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
|
|
pre em { font-weight: bolder; font-style: normal; }
|
|
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
|
|
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
|
|
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
|
|
table thead, table tbody { border-bottom: solid; }
|
|
table tbody th:first-child { border-left: solid; }
|
|
table tbody th { text-align: left; }
|
|
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
|
|
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
|
|
|
|
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
|
|
.matrix, .matrix td { border: none; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
|
|
img.extra { float: right; }
|
|
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
|
|
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
|
|
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
|
|
pre.css:first-line { color: #AAAA50; }
|
|
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
|
|
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
|
|
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
|
|
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
|
|
dl.domintro dd p { margin: 0.5em 0; }
|
|
dl.switch { padding-left: 2em; }
|
|
dl.switch > dt { text-indent: -1.5em; }
|
|
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
|
|
dl.triple { padding: 0 0 0 1em; }
|
|
dl.triple dt, dl.triple dd { margin: 0; display: inline }
|
|
dl.triple dt:after { content: ':'; }
|
|
dl.triple dd:after { content: '\A'; white-space: pre; }
|
|
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
|
|
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
|
|
a .diff-new { border-bottom: 1px blue solid; }
|
|
|
|
h2 { page-break-before: always; }
|
|
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
|
|
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
|
|
|
|
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
|
|
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
|
|
|
|
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
|
|
div.head p { margin: 0; }
|
|
div.head h1 { margin: 0; }
|
|
div.head .logo { float: right; margin: 0 1em; }
|
|
div.head .logo img { border: none } /* remove border from top image */
|
|
div.head dl { margin: 1em 0; }
|
|
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
|
|
|
|
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
|
|
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
|
|
body > .toc > li > * { margin-bottom: 0.5em; }
|
|
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
|
|
.toc, .toc li { list-style: none; }
|
|
|
|
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
|
|
.brief li { margin: 0; padding: 0; }
|
|
.brief li p { margin: 0; padding: 0; }
|
|
|
|
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
|
|
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
|
|
.category-list li { display: inline; }
|
|
.category-list li:not(:last-child)::after { content: ', '; }
|
|
.category-list li > span, .category-list li > a { text-transform: lowercase; }
|
|
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
|
|
|
|
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
|
|
.XXX > :first-child { margin-top: 0; }
|
|
p .XXX { line-height: 3em; }
|
|
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
|
|
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
|
|
.annotation :link, .annotation :visited { color: inherit; }
|
|
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
|
|
.annotation span { border: none ! important; }
|
|
.note { color: green; background: transparent; font-family: sans-serif; }
|
|
.warning { color: red; background: transparent; }
|
|
.note, .warning { font-weight: bolder; font-style: italic; }
|
|
p.note, div.note { padding: 0.5em 2em; }
|
|
span.note { padding: 0 2em; }
|
|
.note p:first-child, .warning p:first-child { margin-top: 0; }
|
|
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
|
|
.warning:before { font-style: normal; }
|
|
p.note:before { content: 'Note: '; }
|
|
p.warning:before { content: '\26A0 Warning! '; }
|
|
|
|
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
|
|
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
|
|
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
|
|
.bookkeeping dt { margin: 0.5em 2em 0; }
|
|
.bookkeeping dd { margin: 0 3em 0.5em; }
|
|
|
|
h4 { position: relative; z-index: 3; }
|
|
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
|
|
.element {
|
|
background: #EEEEFF;
|
|
color: black;
|
|
margin: 0 0 1em 0.15em;
|
|
padding: 0 1em 0.25em 0.75em;
|
|
border-left: solid #9999FF 0.25em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.element:before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: -1.15em;
|
|
height: 2em;
|
|
width: 0.9em;
|
|
background: #EEEEFF;
|
|
content: ' ';
|
|
border-style: none none solid solid;
|
|
border-color: #9999FF;
|
|
border-width: 0.25em;
|
|
}
|
|
|
|
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
|
|
td > .example:only-child { margin: 0 0 0 0.1em; }
|
|
|
|
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
|
|
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
|
|
ul.domTree li li { list-style: none; }
|
|
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree span { font-style: italic; font-family: serif; }
|
|
ul.domTree .t1 code { color: purple; font-weight: bold; }
|
|
ul.domTree .t2 { font-style: normal; font-family: monospace; }
|
|
ul.domTree .t2 .name { color: black; font-weight: bold; }
|
|
ul.domTree .t2 .value { color: blue; font-weight: normal; }
|
|
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
|
|
ul.domTree .t7 code, .domTree .t8 code { color: green; }
|
|
ul.domTree .t10 code { color: teal; }
|
|
|
|
body.dfnEnabled dfn { cursor: pointer; }
|
|
.dfnPanel {
|
|
display: inline;
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0.5em 0.75em;
|
|
font: small sans-serif, Droid Sans Fallback;
|
|
background: #DDDDDD;
|
|
color: black;
|
|
border: outset 0.2em;
|
|
}
|
|
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
|
|
.dfnPanel :link, .dfnPanel :visited { color: black; }
|
|
.dfnPanel p { font-weight: bolder; }
|
|
.dfnPanel * + p { margin-top: 0.25em; }
|
|
.dfnPanel li { list-style-position: inside; }
|
|
|
|
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
|
|
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
|
|
#configUI p label { display: block; }
|
|
#configUI #updateUI, #configUI .loginUI { text-align: center; }
|
|
#configUI input[type=button] { display: block; margin: auto; }
|
|
|
|
fieldset { margin: 1em; padding: 0.5em 1em; }
|
|
fieldset > legend + * { margin-top: 0; }
|
|
fieldset > :last-child { margin-bottom: 0; }
|
|
fieldset p { margin: 0.5em 0; }
|
|
|
|
.stability {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0; right: 0;
|
|
margin: 0 auto 0 auto;
|
|
width: 50%;
|
|
background: maroon; color: yellow;
|
|
-webkit-border-radius: 1em 1em 0 0;
|
|
-moz-border-radius: 1em 1em 0 0;
|
|
border-radius: 1em 1em 0 0;
|
|
-moz-box-shadow: 0 0 1em #500;
|
|
-webkit-box-shadow: 0 0 1em #500;
|
|
box-shadow: 0 0 1em red;
|
|
padding: 0.5em 1em;
|
|
text-align: center;
|
|
}
|
|
.stability strong {
|
|
display: block;
|
|
}
|
|
.stability input {
|
|
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
|
|
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
|
|
}
|
|
.stability input:hover {
|
|
color: white;
|
|
text-shadow: 0 0 2px black;
|
|
}
|
|
.stability input:active {
|
|
padding: 0.3em 0.45em 0.2em 0.55em;
|
|
}
|
|
.stability :link, .stability :visited,
|
|
.stability :link:hover, .stability :visited:hover {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
</style>
|
|
|
|
<link
|
|
href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}"
|
|
id="author" rel="alternate stylesheet" title="Author documentation only">
|
|
<link
|
|
href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}"
|
|
id="highlight" rel="alternate stylesheet" title="Highlight implementation
|
|
requirements">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css">
|
|
<style type="text/css">
|
|
|
|
.applies thead th > * { display: block; }
|
|
.applies thead code { display: block; }
|
|
.applies tbody th { whitespace: nowrap; }
|
|
.applies td { text-align: center; }
|
|
.applies .yes { background: yellow; }
|
|
|
|
.matrix, .matrix td { border: hidden; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
td.eg { border-width: thin; text-align: center; }
|
|
|
|
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
|
|
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
|
|
#table-example-1 caption { padding-bottom: 0.5em; }
|
|
#table-example-1 thead, #table-example-1 tbody { border: none; }
|
|
#table-example-1 th, #table-example-1 td { border: solid thin; }
|
|
#table-example-1 th { font-weight: normal; }
|
|
#table-example-1 td { border-style: none solid; vertical-align: top; }
|
|
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
|
|
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
|
|
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
|
|
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
|
|
#table-example-1 tbody td:first-child::after { content: leader(". "); }
|
|
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
|
|
#table-example-1 tbody td:first-child + td { width: 10em; }
|
|
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
|
|
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
|
|
|
|
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
|
|
.apple-table-examples * { font-family: "Times", serif; }
|
|
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
|
|
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
|
|
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
|
|
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
|
|
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
|
|
.apple-table-examples td { text-align: right; vertical-align: top; }
|
|
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
|
|
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
|
|
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
|
|
.apple-table-examples sup { line-height: 0; }
|
|
|
|
.details-example img { vertical-align: top; }
|
|
|
|
#base64-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 6em;
|
|
column-count: 5;
|
|
column-gap: 1em;
|
|
-moz-column-width: 6em;
|
|
-moz-column-count: 5;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 6em;
|
|
-webkit-column-count: 5;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#base64-table thead { display: none; }
|
|
#base64-table * { border: none; }
|
|
#base64-table tbody td:first-child:after { content: ':'; }
|
|
#base64-table tbody td:last-child { text-align: right; }
|
|
|
|
#named-character-references-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 30em;
|
|
column-gap: 1em;
|
|
-moz-column-width: 30em;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 30em;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#named-character-references-table > table > tbody > tr > td:first-child + td,
|
|
#named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
|
|
#named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
|
|
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
|
|
|
|
.glyph.control { color: red; }
|
|
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
|
|
}
|
|
|
|
</style><style type="text/css">
|
|
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function getCookie(name) {
|
|
var params = location.search.substr(1).split("&");
|
|
for (var index = 0; index < params.length; index++) {
|
|
if (params[index] == name)
|
|
return "1";
|
|
var data = params[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
var cookies = document.cookie.split("; ");
|
|
for (var index = 0; index < cookies.length; index++) {
|
|
var data = cookies[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
return null;
|
|
}
|
|
</script><body><div class="head" id="head">
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
|
|
|
|
<h1>HTML Canvas 2D Context</h1>
|
|
<h2 class="no-num no-toc" id="generatedID"></h2>
|
|
<h2 class="no-num no-toc" id="w3c-working-draft-25-may-2011">W3C Working Draft 25 May 2011</h2>
|
|
<dl><dt>This Version:</dt>
|
|
<dd><a href="http://www.w3.org/TR/2011/WD-2dcontext-20110525/">http://www.w3.org/TR/2011/WD-2dcontext-20110525/</a></dd>
|
|
<dt>Latest Published Version:</dt>
|
|
<dd><a href="http://www.w3.org/TR/2dcontext/">http://www.w3.org/TR/2dcontext/</a></dd>
|
|
<dt>Latest Editor's Draft:</dt>
|
|
<dd><a class="latest-link" href="http://dev.w3.org/html5/2dcontext/Overview.html">http://dev.w3.org/html5/2dcontext/Overview.html</a></dd>
|
|
<dt>Previous Versions:</dt>
|
|
<dd><a href="http://www.w3.org/TR/2011/WD-2dcontext-20110405/">http://www.w3.org/TR/2011/WD-2dcontext-20110405/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2011/WD-2dcontext-20110113/">http://www.w3.org/TR/2011/WD-2dcontext-20110113/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2010/WD-2dcontext-20101019/">http://www.w3.org/TR/2010/WD-2dcontext-20101019/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2010/WD-2dcontext-20100624/">http://www.w3.org/TR/2010/WD-2dcontext-20100624/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2010/WD-2dcontext-20100304/">http://www.w3.org/TR/2010/WD-2dcontext-20100304/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2009/WD-html5-20090825/">http://www.w3.org/TR/2009/WD-html5-20090825/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2009/WD-html5-20090423/">http://www.w3.org/TR/2009/WD-html5-20090423/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2009/WD-html5-20090212/">http://www.w3.org/TR/2009/WD-html5-20090212/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2008/WD-html5-20080610/">http://www.w3.org/TR/2008/WD-html5-20080610/</a></dd>
|
|
<dd><a href="http://www.w3.org/TR/2008/WD-html5-20080122/">http://www.w3.org/TR/2008/WD-html5-20080122/</a></dd>
|
|
<!-- :ZZZ -->
|
|
<dt>Editor:</dt>
|
|
<dd><a href="mailto:ian@hixie.ch">Ian Hickson</a>, Google, Inc.</dd>
|
|
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
|
|
© 2010 <a href="http://www.w3.org/"><abbr title="World Wide
|
|
Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
|
|
Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.org/"><abbr title="European Research
|
|
Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C
|
|
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
|
|
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
<p class="alt">The bulk of the text of this specification is also
|
|
available in the WHATWG <a href="http://www.whatwg.org/specs/web-apps/current-work/complete.html#2dcontext">Web Applications 1.0</a> specification, under a license that permits
|
|
reuse of the specification text.</p>
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
|
|
|
|
</div><hr class="top"><h2 class="no-num no-toc" id="abstract">Abstract</h2><p>This specification defines the 2D Context for the HTML
|
|
<code>canvas</code> element.<h2 class="no-num no-toc" id="status-of-this-document">Status of This document</h2><p><em>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 <a href="http://www.w3.org/TR/">W3C technical reports index</a>
|
|
at http://www.w3.org/TR/.</em></p><p>If you wish to make comments regarding this document in a manner
|
|
that is tracked by the W3C, please submit them via using <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG">our
|
|
public bug database</a>. If you do not have an account then you can
|
|
enter feedback using this form:<form action="http://www.whatwg.org/specs/web-apps/current-work/file-spam.cgi" method="post">
|
|
<fieldset><legend>Feedback Comments</legend>
|
|
<input name="id" type="hidden" value="top"><input name="component" type="hidden" value="HTML Canvas 2D Context (editor: Ian Hickson)"><input name="response" type="hidden" value="html"><p><label for="feedbackBox">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
|
|
<em>what</em> the problem you're trying to solve is. That's more
|
|
important than the solution, in fact.</label></p>
|
|
<p><textarea cols="79" id="feedbackBox" name="text" rows="10"></textarea></p>
|
|
<p class="note">Please don't use section numbers as these tend to
|
|
change rapidly and make your feedback harder to understand.</p>
|
|
<script type="text/javascript">
|
|
function checkFeedbackForm(form) {
|
|
if (form.elements.text.value.match(/^ *</)) {
|
|
alert('Please don\'t start your feedback with an angle bracket, instead explain what topic your feedback is about first.');
|
|
return true;
|
|
} else if (form.elements.text.value.match(/ [^ ]+ [^ ]+ [^ ]+ [^ ]+ /)) {
|
|
if (form.elements.text.value.match(/^Please enter your feedback, carefully/)) {
|
|
alert('Please enter your feedback, explaining what is wrong, and without repeating the instructions. Thanks!');
|
|
return true;
|
|
} else if (form.elements.text.value.match(/ [^ ]+ [^ ]+ [^ ]+ [^ ]+ /)) {
|
|
form.action = "http://www.whatwg.org/specs/web-apps/current-work/file-bug.cgi";
|
|
return true;
|
|
} else {
|
|
alert('Please include significantly more detail about exactly what problem you are trying to solve.');
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
</script><p>
|
|
<input onclick="return checkFeedbackForm(form)" type="submit" value="Submit feedback"><small>(Note: Your IP address and user agent will be publicly recorded for spam prevention purposes.)</small>
|
|
</p>
|
|
</fieldset></form><p>If you cannot do this then you can also e-mail feedback to <a href="mailto:public-html-comments@w3.org">public-html-comments@w3.org</a>
|
|
(<a href="mailto:public-html-comments-request@w3.org?subject=subscribe">subscribe</a>,
|
|
<a href="http://lists.w3.org/Archives/Public/public-html-comments/">archives</a>),
|
|
and arrangements will be made to transpose the comments to our
|
|
public bug database.
|
|
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
Alternatively, you can e-mail feedback to <a href="mailto:whatwg@whatwg.org">whatwg@whatwg.org</a> (<a href="http://lists.whatwg.org/listinfo.cgi/whatwg-whatwg.org">subscribe</a>,
|
|
<a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/">archives</a>).
|
|
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.
|
|
<!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING SENTENCE TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
|
|
All feedback is welcome.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>The working groups maintains <a href="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=">a
|
|
list of all bug reports that the editor has not yet tried to
|
|
address</a> and <a href="http://www.w3.org/html/wg/tracker/products/1">a list of issues
|
|
for which the chairs have not yet declared a decision</a>. The
|
|
editor also maintains <a href="http://www.whatwg.org/issues/">a list
|
|
of all e-mails that he has not yet tried to address</a>. These bugs,
|
|
issues, and e-mails apply to multiple HTML-related specifications,
|
|
not just this one.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Implementors should be aware that this specification is not
|
|
stable. <strong>Implementors who are not taking part in the
|
|
discussions are likely to find the specification changing out from
|
|
under them in incompatible ways.</strong> 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.<div id="multipage-common">
|
|
|
|
|
|
<p class="stability" id="wip"><strong>This is a work in
|
|
progress!</strong> For the latest updates from the HTML WG, possibly
|
|
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/2dcontext/Overview.html">editor's draft</a> instead.
|
|
There may also be a more
|
|
<a href="http://www.w3.org/TR/2dcontext/">up-to-date Working Draft</a>
|
|
with changes based on resolution of Last Call issues.
|
|
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
|
|
<script type="text/javascript">
|
|
function closeWarning(element) {
|
|
element.parentNode.removeChild(element);
|
|
var date = new Date();
|
|
date.setDate(date.getDate()+4);
|
|
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
|
|
}
|
|
if (getCookie('hide-obsolescence-warning') == '1')
|
|
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
|
|
</script></div><p>The publication of this document by the W3C as a W3C Last Call 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.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
|
|
|
|
<p>Activities are being pursued by some members of the HTML Working Group
|
|
to provide new information related to this document, with the intent of
|
|
reopening
|
|
<a href="http://dev.w3.org/html5/status/new-information-status.html#ISSUE-131">HTML Working Group issue 131
|
|
(Modify existing Canvas 2D API caret and focus ring support to drive screen magnification)</a>.</p>
|
|
|
|
<p>A list of other potential
|
|
<a href='http://www.w3.org/WAI/PF/HTML/wiki/Work_Topics'>accessibility related issues</a>
|
|
is also available.</p>
|
|
|
|
<p>W3C anticipates that there will be changes to this specification as a
|
|
result of the resolution of Last Call issues. Per the usual W3C Process,
|
|
any significant changes to the specification will trigger a subsequent Last
|
|
Call.</p>
|
|
|
|
<p>The latest stable version of the editor's draft of this
|
|
specification is always available on <a href="http://dev.w3.org/html5/">the W3C CVS server</a> and in the <a href="http://svn.whatwg.org/webapps/">WHATWG Subversion
|
|
repository</a>. The <a href="http://www.whatwg.org/specs/web-apps/current-work/complete.html">latest
|
|
editor's working copy</a> (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 <a href="http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F">WHATWG
|
|
FAQ</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>There are various ways to follow the change history for the
|
|
HTML specifications:<dl><dt>E-mail notifications of changes</dt>
|
|
<dd>HTML-Diffs mailing list (diff-marked HTML versions for each change): <a href="http://lists.w3.org/Archives/Public/public-html-diffs/latest">http://lists.w3.org/Archives/Public/public-html-diffs/latest</a></dd>
|
|
<dd>Commit-Watchers mailing list (complete source diffs): <a href="http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org">http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org</a></dd>
|
|
<dt>Real-time notifications of changes:</dt>
|
|
<dd>Generated diff-marked HTML versions for each change: <a href="http://twitter.com/HTML5">http://twitter.com/HTML5</a></dd>
|
|
<dt>Browsable version-control record of all changes:</dt>
|
|
<dd>CVSWeb interface with side-by-side diffs: <a href="http://dev.w3.org/cvsweb/html5/">http://dev.w3.org/cvsweb/html5/</a></dd>
|
|
<dd>Annotated summary with unified diffs: <a href="http://html5.org/tools/web-apps-tracker">http://html5.org/tools/web-apps-tracker</a></dd>
|
|
<dd>Raw Subversion interface: <code>svn checkout http://svn.whatwg.org/webapps/</code></dd>
|
|
</dl><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>The W3C <a href="http://www.w3.org/html/wg/">HTML Working
|
|
Group</a> is the W3C working group responsible for this
|
|
specification's progress along the W3C Recommendation
|
|
track.
|
|
This specification is the 25 May 2011 Last Call Working Draft.
|
|
The Last Call period ends 03 August 2011.
|
|
</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Work on this specification is also done at the <a href="http://www.whatwg.org/">WHATWG</a>. The W3C HTML working group
|
|
actively pursues convergence with the WHATWG, as required by the <a href="http://www.w3.org/2007/03/HTML-WG-charter">W3C HTML working
|
|
group charter</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>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.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5
|
|
February 2004 W3C Patent Policy</a>. W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">public list of
|
|
any patent disclosures</a> 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 <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.<h2 class="no-num no-toc" id="contents">Table of Contents</h2>
|
|
<ol class="toc">
|
|
<li><a href="#conformance-requirements"><span class="secno">1 </span>Conformance requirements</a></li>
|
|
<li><a href="#the-canvas-state"><span class="secno">2 </span>The canvas state</a></li>
|
|
<li><a href="#transformations"><span class="secno">3 </span>Transformations</a></li>
|
|
<li><a href="#compositing"><span class="secno">4 </span>Compositing</a></li>
|
|
<li><a href="#colors-and-styles"><span class="secno">5 </span>Colors and styles</a></li>
|
|
<li><a href="#line-styles"><span class="secno">6 </span>Line styles</a></li>
|
|
<li><a href="#shadows"><span class="secno">7 </span>Shadows</a></li>
|
|
<li><a href="#simple-shapes-rectangles"><span class="secno">8 </span>Simple shapes (rectangles)</a></li>
|
|
<li><a href="#complex-shapes-paths"><span class="secno">9 </span>Complex shapes (paths)</a></li>
|
|
<li><a href="#focus-management"><span class="secno">10 </span>Focus management</a></li>
|
|
<li><a href="#caret-selection"><span class="secno">11 </span>Caret and selection management</a></li>
|
|
<li><a href="#text"><span class="secno">12 </span>Text</a></li>
|
|
<li><a href="#images"><span class="secno">13 </span>Images</a></li>
|
|
<li><a href="#pixel-manipulation"><span class="secno">14 </span>Pixel manipulation</a></li>
|
|
<li><a href="#drawing-model"><span class="secno">15 </span>Drawing model</a></li>
|
|
<li><a href="#examples"><span class="secno">16 </span>Examples</a></li>
|
|
<li><a class="no-num" href="#references">References</a></li>
|
|
<li><a class="no-num" href="#acknowledgements">Acknowledgements</a></ol>
|
|
<hr><h2 id="conformance-requirements"><span class="secno">1 </span>Conformance requirements</h2><p>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. <a href="#refsHTML5">[HTML5]</a><p>Interfaces are defined in terms of Web IDL. <a href="#refsWEBIDL">[WEBIDL]</a><p>This specification defines the <dfn id="canvas-context-2d" title="canvas-context-2d"><code>2d</code></dfn> context type, whose
|
|
API is implemented using the <code><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>
|
|
interface.<div class="impl">
|
|
|
|
<p>When the <code title="dom-canvas-getContext">getContext()</code>
|
|
method of a <code>canvas</code> element is to <span title="getContext-return">return a new object for the <var title="">contextId</var></span> <code title="canvas-context-2d"><a href="#canvas-context-2d">2d</a></code>, the user agent must return a
|
|
new <code><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object. Any additional
|
|
arguments are ignored.</p>
|
|
|
|
</div><p>The 2D context represents a flat Cartesian surface whose origin
|
|
(0,0) is at the top left corner, with the coordinate space having
|
|
<var title="">x</var> values increasing when going right, and <var title="">y</var> values increasing when going down.<pre class="idl">interface <dfn id="canvasrenderingcontext2d">CanvasRenderingContext2D</dfn> {
|
|
|
|
// back-reference to the canvas
|
|
readonly attribute <span>HTMLCanvasElement</span> <a href="#dom-context-2d-canvas" title="dom-context-2d-canvas">canvas</a>;
|
|
|
|
// state
|
|
void <a href="#dom-context-2d-save" title="dom-context-2d-save">save</a>(); // push state on state stack
|
|
void <a href="#dom-context-2d-restore" title="dom-context-2d-restore">restore</a>(); // pop state stack and restore state
|
|
// transformations (default transform is the identity matrix)
|
|
void <a href="#dom-context-2d-scale" title="dom-context-2d-scale">scale</a>(in double x, in double y);
|
|
void <a href="#dom-context-2d-rotate" title="dom-context-2d-rotate">rotate</a>(in double angle);
|
|
void <a href="#dom-context-2d-translate" title="dom-context-2d-translate">translate</a>(in double x, in double y);
|
|
void <a href="#dom-context-2d-transform" title="dom-context-2d-transform">transform</a>(in double a, in double b, in double c, in double d, in double e, in double f);
|
|
void <a href="#dom-context-2d-settransform" title="dom-context-2d-setTransform">setTransform</a>(in double a, in double b, in double c, in double d, in double e, in double f);
|
|
// compositing
|
|
attribute double <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">globalAlpha</a>; // (default 1.0)
|
|
attribute DOMString <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</a>; // (default source-over)
|
|
// colors and styles
|
|
attribute any <a href="#dom-context-2d-strokestyle" title="dom-context-2d-strokeStyle">strokeStyle</a>; // (default black)
|
|
attribute any <a href="#dom-context-2d-fillstyle" title="dom-context-2d-fillStyle">fillStyle</a>; // (default black)
|
|
<a href="#canvasgradient">CanvasGradient</a> <a href="#dom-context-2d-createlineargradient" title="dom-context-2d-createLinearGradient">createLinearGradient</a>(in double x0, in double y0, in double x1, in double y1);
|
|
<a href="#canvasgradient">CanvasGradient</a> <a href="#dom-context-2d-createradialgradient" title="dom-context-2d-createRadialGradient">createRadialGradient</a>(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);
|
|
<a href="#canvaspattern">CanvasPattern</a> <a href="#dom-context-2d-createpattern" title="dom-context-2d-createPattern">createPattern</a>(in <span>HTMLImageElement</span> image, in DOMString repetition);
|
|
<a href="#canvaspattern">CanvasPattern</a> <a href="#dom-context-2d-createpattern" title="dom-context-2d-createPattern">createPattern</a>(in <span>HTMLCanvasElement</span> image, in DOMString repetition);
|
|
<a href="#canvaspattern">CanvasPattern</a> <a href="#dom-context-2d-createpattern" title="dom-context-2d-createPattern">createPattern</a>(in <span>HTMLVideoElement</span> image, in DOMString repetition);
|
|
|
|
// line caps/joins
|
|
attribute double <a href="#dom-context-2d-linewidth" title="dom-context-2d-lineWidth">lineWidth</a>; // (default 1)
|
|
attribute DOMString <a href="#dom-context-2d-linecap" title="dom-context-2d-lineCap">lineCap</a>; // "butt", "round", "square" (default "butt")
|
|
attribute DOMString <a href="#dom-context-2d-linejoin" title="dom-context-2d-lineJoin">lineJoin</a>; // "round", "bevel", "miter" (default "miter")
|
|
attribute double <a href="#dom-context-2d-miterlimit" title="dom-context-2d-miterLimit">miterLimit</a>; // (default 10)
|
|
|
|
// shadows
|
|
attribute double <a href="#dom-context-2d-shadowoffsetx" title="dom-context-2d-shadowOffsetX">shadowOffsetX</a>; // (default 0)
|
|
attribute double <a href="#dom-context-2d-shadowoffsety" title="dom-context-2d-shadowOffsetY">shadowOffsetY</a>; // (default 0)
|
|
attribute double <a href="#dom-context-2d-shadowblur" title="dom-context-2d-shadowBlur">shadowBlur</a>; // (default 0)
|
|
attribute DOMString <a href="#dom-context-2d-shadowcolor" title="dom-context-2d-shadowColor">shadowColor</a>; // (default transparent black)
|
|
|
|
// rects
|
|
void <a href="#dom-context-2d-clearrect" title="dom-context-2d-clearRect">clearRect</a>(in double x, in double y, in double w, in double h);
|
|
void <a href="#dom-context-2d-fillrect" title="dom-context-2d-fillRect">fillRect</a>(in double x, in double y, in double w, in double h);
|
|
void <a href="#dom-context-2d-strokerect" title="dom-context-2d-strokeRect">strokeRect</a>(in double x, in double y, in double w, in double h);
|
|
|
|
// path API
|
|
void <a href="#dom-context-2d-beginpath" title="dom-context-2d-beginPath">beginPath</a>();
|
|
void <a href="#dom-context-2d-closepath" title="dom-context-2d-closePath">closePath</a>();
|
|
void <a href="#dom-context-2d-moveto" title="dom-context-2d-moveTo">moveTo</a>(in double x, in double y);
|
|
void <a href="#dom-context-2d-lineto" title="dom-context-2d-lineTo">lineTo</a>(in double x, in double y);
|
|
void <a href="#dom-context-2d-quadraticcurveto" title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</a>(in double cpx, in double cpy, in double x, in double y);
|
|
void <a href="#dom-context-2d-beziercurveto" title="dom-context-2d-bezierCurveTo">bezierCurveTo</a>(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);
|
|
void <a href="#dom-context-2d-arcto" title="dom-context-2d-arcTo">arcTo</a>(in double x1, in double y1, in double x2, in double y2, in double radius);
|
|
void <a href="#dom-context-2d-rect" title="dom-context-2d-rect">rect</a>(in double x, in double y, in double w, in double h);
|
|
void <a href="#dom-context-2d-arc" title="dom-context-2d-arc">arc</a>(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);
|
|
void <a href="#dom-context-2d-fill" title="dom-context-2d-fill">fill</a>();
|
|
void <a href="#dom-context-2d-stroke" title="dom-context-2d-stroke">stroke</a>();
|
|
void <a href="#dom-context-2d-clip" title="dom-context-2d-clip">clip</a>();
|
|
boolean <a href="#dom-context-2d-ispointinpath" title="dom-context-2d-isPointInPath">isPointInPath</a>(in double x, in double y);
|
|
|
|
// Focus management
|
|
boolean <a href="#dom-context-2d-drawfocusring" title="dom-context-2d-drawFocusRing">drawFocusRing</a>(in <span>Element</span> element, in optional boolean canDrawCustom);
|
|
|
|
// Caret and selection management
|
|
long <a id="dom-context-2d-caretBlinkRate" href="#dom-context-2d-caretBlinkRate" title="dom-context-2d-caretBlinkRate">caretBlinkRate</a>();
|
|
boolean <a href="#dom-context-2d-setCaretSelectionRect" title="dom-context-2d-setCaretSelectionRect">setCaretSelectionRect</a>(in <span>Element</span> element, in double x, in double y, in double w, in double h);
|
|
|
|
// text
|
|
attribute DOMString <a href="#dom-context-2d-font" title="dom-context-2d-font">font</a>; // (default 10px sans-serif)
|
|
attribute DOMString <a href="#dom-context-2d-textalign" title="dom-context-2d-textAlign">textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
|
|
attribute DOMString <a href="#dom-context-2d-textbaseline" title="dom-context-2d-textBaseline">textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
|
|
void <a href="#dom-context-2d-filltext" title="dom-context-2d-fillText">fillText</a>(in DOMString text, in double x, in double y, in optional double maxWidth);
|
|
void <a href="#dom-context-2d-stroketext" title="dom-context-2d-strokeText">strokeText</a>(in DOMString text, in double x, in double y, in optional double maxWidth);<!-- v5DVT
|
|
void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in double x, in double y, in optional double maxHeight);
|
|
void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in double x, in double y, in optional double maxHeight); -->
|
|
<a href="#textmetrics">TextMetrics</a> <a href="#dom-context-2d-measuretext" title="dom-context-2d-measureText">measureText</a>(in DOMString text);
|
|
|
|
// drawing images
|
|
void <a href="#dom-context-2d-drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <span>HTMLImageElement</span> image, in double dx, in double dy, in optional double dw, in double dh);
|
|
void <a href="#dom-context-2d-drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <span>HTMLImageElement</span> 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 <a href="#dom-context-2d-drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <span>HTMLCanvasElement</span> image, in double dx, in double dy, in optional double dw, in double dh);
|
|
void <a href="#dom-context-2d-drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <span>HTMLCanvasElement</span> 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 <a href="#dom-context-2d-drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <span>HTMLVideoElement</span> image, in double dx, in double dy, in optional double dw, in double dh);
|
|
void <a href="#dom-context-2d-drawimage" title="dom-context-2d-drawImage">drawImage</a>(in <span>HTMLVideoElement</span> 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
|
|
<a href="#imagedata">ImageData</a> <a href="#dom-context-2d-createimagedata" title="dom-context-2d-createImageData">createImageData</a>(in double sw, in double sh);
|
|
<a href="#imagedata">ImageData</a> <a href="#dom-context-2d-createimagedata" title="dom-context-2d-createImageData">createImageData</a>(in <a href="#imagedata">ImageData</a> imagedata);
|
|
<a href="#imagedata">ImageData</a> <a href="#dom-context-2d-getimagedata" title="dom-context-2d-getImageData">getImageData</a>(in double sx, in double sy, in double sw, in double sh);
|
|
void <a href="#dom-context-2d-putimagedata" title="dom-context-2d-putImageData">putImageData</a>(in <a href="#imagedata">ImageData</a> imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);
|
|
};
|
|
|
|
interface <dfn id="canvasgradient">CanvasGradient</dfn> {
|
|
// opaque object
|
|
void <a href="#dom-canvasgradient-addcolorstop" title="dom-canvasgradient-addColorStop">addColorStop</a>(in double offset, in DOMString color);
|
|
};
|
|
|
|
interface <dfn id="canvaspattern">CanvasPattern</dfn> {
|
|
// opaque object
|
|
};
|
|
|
|
interface <dfn id="textmetrics">TextMetrics</dfn> {
|
|
readonly attribute double <a href="#dom-textmetrics-width" title="dom-textmetrics-width">width</a>;
|
|
};
|
|
|
|
interface <dfn id="imagedata">ImageData</dfn> {
|
|
readonly attribute unsigned long <a href="#dom-imagedata-width" title="dom-imagedata-width">width</a>;
|
|
readonly attribute unsigned long <a href="#dom-imagedata-height" title="dom-imagedata-height">height</a>;
|
|
readonly attribute <a href="#canvaspixelarray">CanvasPixelArray</a> <a href="#dom-imagedata-data" title="dom-imagedata-data">data</a>;
|
|
};
|
|
|
|
interface <dfn id="canvaspixelarray">CanvasPixelArray</dfn> {
|
|
readonly attribute unsigned long <a href="#dom-canvaspixelarray-length" title="dom-canvaspixelarray-length">length</a>;
|
|
<a href="#dom-canvaspixelarray-get" title="dom-CanvasPixelArray-get">getter</a> octet (in unsigned long index);
|
|
<a href="#dom-canvaspixelarray-set" title="dom-CanvasPixelArray-set">setter</a> void (in unsigned long index, in octet value);
|
|
};</pre><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-canvas"><a href="#dom-context-2d-canvas">canvas</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the <code>canvas</code> element.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-canvas" title="dom-context-2d-canvas"><code>canvas</code></dfn>
|
|
attribute must return the <code>canvas</code> element that the
|
|
context paints on.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<p>Whenever the CSS value <code title="">currentColor</code> 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 <code title="">currentColor</code> 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
|
|
<span>in a <code>Document</code></span>), then the "computed value
|
|
of the 'color' property" for the purposes of determining the
|
|
computed value of the <code title="">currentColor</code> keyword is
|
|
fully opaque black. <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
|
|
|
|
<p>In the case of <code title="dom-canvasgradient-addColorStop"><a href="#dom-canvasgradient-addcolorstop">addColorStop()</a></code> on
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code>, the "computed value of the 'color'
|
|
property" for the purposes of determining the computed value of the
|
|
<code title="">currentColor</code> keyword is always fully opaque
|
|
black (there is no associated element). <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
|
|
|
|
<p class="note">This is because <code><a href="#canvasgradient">CanvasGradient</a></code> objects
|
|
are <code>canvas</code>-neutral — a
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code> object created by one
|
|
<code>canvas</code> 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.</p>
|
|
|
|
</div><h2 id="the-canvas-state"><span class="secno">2 </span>The canvas state</h2><p>Each context maintains a stack of drawing states. <dfn id="drawing-state" title="drawing state">Drawing states</dfn> consist of:<ul class="brief"><li>The current <a href="#transformations" title="dom-context-2d-transformation">transformation matrix</a>.</li>
|
|
<li>The current <a href="#clipping-region">clipping region</a>.</li>
|
|
<li>The current values of the following attributes: <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code>, <code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code>, <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>, <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code>, <code title="dom-context-2d-lineCap"><a href="#dom-context-2d-linecap">lineCap</a></code>, <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code>, <code title="dom-context-2d-miterLimit"><a href="#dom-context-2d-miterlimit">miterLimit</a></code>, <code title="dom-context-2d-shadowOffsetX"><a href="#dom-context-2d-shadowoffsetx">shadowOffsetX</a></code>, <code title="dom-context-2d-shadowOffsetY"><a href="#dom-context-2d-shadowoffsety">shadowOffsetY</a></code>, <code title="dom-context-2d-shadowBlur"><a href="#dom-context-2d-shadowblur">shadowBlur</a></code>, <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code>, <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code>, <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code>, <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code>, <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code>.</li>
|
|
</ul><p class="note">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 <code title="dom-context-2d-beginPath"><a href="#dom-context-2d-beginpath">beginPath()</a></code> method. The
|
|
current bitmap is a property of the canvas, not the context.<dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-save"><a href="#dom-context-2d-save">save</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Pushes the current state onto the stack.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-restore"><a href="#dom-context-2d-restore">restore</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Pops the top state on the stack, restoring the context to that state.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-save" title="dom-context-2d-save"><code>save()</code></dfn>
|
|
method must push a copy of the current drawing state onto the
|
|
drawing state stack.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-restore" title="dom-context-2d-restore"><code>restore()</code></dfn> 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.</p>
|
|
|
|
|
|
</div><h2 id="transformations"><span class="secno">3 </span><dfn title="dom-context-2d-transformation">Transformations</dfn></h2><p>The transformation matrix is applied to coordinates when creating
|
|
shapes and paths.</p><div class="impl">
|
|
|
|
<p>When the context is created, the transformation matrix must
|
|
initially be the identity transform. It may then be adjusted using
|
|
the transformation methods.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
</div><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-scale"><a href="#dom-context-2d-scale">scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Changes the transformation matrix to apply a scaling transformation with the given characteristics.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-rotate"><a href="#dom-context-2d-rotate">rotate</a></code>(<var title="">angle</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-translate"><a href="#dom-context-2d-translate">translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Changes the transformation matrix to apply a translation transformation with the given characteristics.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-transform"><a href="#dom-context-2d-transform">transform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Changes the transformation matrix to apply the matrix given by the arguments as described below.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-setTransform"><a href="#dom-context-2d-settransform">setTransform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Changes the transformation matrix <em>to</em> the matrix given by the arguments as described below.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-scale" title="dom-context-2d-scale"><code>scale(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
|
|
add the scaling transformation described by the arguments to the
|
|
transformation matrix. The <var title="">x</var> argument represents
|
|
the scale factor in the horizontal direction and the <var title="">y</var> argument represents the scale factor in the
|
|
vertical direction. The factors are multiples.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-rotate" title="dom-context-2d-rotate"><code>rotate(<var title="">angle</var>)</code></dfn> method must add the rotation
|
|
transformation described by the argument to the transformation
|
|
matrix. The <var title="">angle</var> argument represents a
|
|
clockwise rotation angle expressed in radians.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-translate" title="dom-context-2d-translate"><code>translate(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
|
|
add the translation transformation described by the arguments to the
|
|
transformation matrix. The <var title="">x</var> argument represents
|
|
the translation distance in the horizontal direction and the <var title="">y</var> argument represents the translation distance in the
|
|
vertical direction. The arguments are in coordinate space units.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-transform" title="dom-context-2d-transform"><code>transform(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</code></dfn> method must replace the current
|
|
transformation matrix with the result of multiplying the current
|
|
transformation matrix with the matrix described by:</p>
|
|
|
|
</div><table class="matrix"><tr><td><var title="">a</var></td>
|
|
<td><var title="">c</var></td>
|
|
<td><var title="">e</var></td>
|
|
<tr><td><var title="">b</var></td>
|
|
<td><var title="">d</var></td>
|
|
<td><var title="">f</var></td>
|
|
<tr><td>0</td>
|
|
<td>0</td>
|
|
<td>1</td>
|
|
</table><p class="note">The arguments <var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, and <var title="">f</var> are sometimes called
|
|
<var title="">m11</var>, <var title="">m12</var>, <var title="">m21</var>, <var title="">m22</var>, <var title="">dx</var>,
|
|
and <var title="">dy</var> or <var title="">m11</var>, <var title="">m21</var>, <var title="">m12</var>, <var title="">m22</var>, <var title="">dx</var>, and <var title="">dy</var>. Care should be taken in particular with the order
|
|
of the second and third arguments (<var title="">b</var> and <var title="">c</var>) as their order varies from API to API and APIs
|
|
sometimes use the notation <var title="">m12</var>/<var title="">m21</var> and sometimes <var title="">m21</var>/<var title="">m12</var> for those positions.<div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-settransform" title="dom-context-2d-setTransform"><code>setTransform(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>,
|
|
<var title="">f</var>)</code></dfn> method must reset the current
|
|
transform to the identity matrix, and then invoke the <code><a href="#dom-context-2d-transform" title="dom-context-2d-transform">transform</a>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>,
|
|
<var title="">f</var>)</code> method with the same arguments.</p>
|
|
|
|
</div><h2 id="compositing"><span class="secno">4 </span>Compositing</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current alpha value applied to rendering operations.</p>
|
|
|
|
<p>Can be set, to change the alpha value. Values outside of the
|
|
range 0.0 .. 1.0 are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current composition operation, from the list below.</p>
|
|
|
|
<p>Can be set, to change the composition operation. Unknown values
|
|
are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>All drawing operations are affected by the global compositing
|
|
attributes, <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code> and <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code>.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha"><code>globalAlpha</code></dfn>
|
|
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 <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code> attribute must
|
|
initially have the value 1.0.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation"><code>globalCompositeOperation</code></dfn>
|
|
attribute sets how shapes and images are drawn onto the existing
|
|
bitmap, once they have had <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code> and the
|
|
current transformation matrix applied. It must be set to a value
|
|
from the following list. In the descriptions below, the source
|
|
image, <var title="">A</var>, is the shape or image being rendered,
|
|
and the destination image, <var title="">B</var>, is the current
|
|
state of the bitmap.</p>
|
|
|
|
</div><dl><dt><dfn id="gcop-source-atop" title="gcop-source-atop"><code>source-atop</code></dfn></dt>
|
|
|
|
<dd><var title="">A</var> atop <var title="">B</var>. <span class="note">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.</span></dd>
|
|
|
|
<dt><dfn id="gcop-source-in" title="gcop-source-in"><code>source-in</code></dfn></dt>
|
|
|
|
<dd><var title="">A</var> in <var title="">B</var>. <span class="note">Display the
|
|
source image wherever both the source image and destination image
|
|
are opaque. Display transparency elsewhere.</span></dd>
|
|
|
|
<dt><dfn id="gcop-source-out" title="gcop-source-out"><code>source-out</code></dfn></dt>
|
|
|
|
<dd><var title="">A</var> out <var title="">B</var>. <span class="note">Display the
|
|
source image wherever the source image is opaque and the
|
|
destination image is transparent. Display transparency
|
|
elsewhere.</span></dd>
|
|
|
|
<dt><dfn id="gcop-source-over" title="gcop-source-over"><code>source-over</code></dfn> (default)</dt>
|
|
|
|
<dd><var title="">A</var> over <var title="">B</var>. <span class="note">Display the
|
|
source image wherever the source image is opaque. Display the
|
|
destination image elsewhere.</span></dd>
|
|
|
|
|
|
<dt><dfn id="gcop-destination-atop" title="gcop-destination-atop"><code>destination-atop</code></dfn></dt>
|
|
|
|
<dd><var title="">B</var> atop <var title="">A</var>. <span class="note">Same as <code title="gcop-source-atop"><a href="#gcop-source-atop">source-atop</a></code> but using the
|
|
destination image instead of the source image and vice versa.</span></dd>
|
|
|
|
<dt><dfn id="gcop-destination-in" title="gcop-destination-in"><code>destination-in</code></dfn></dt>
|
|
|
|
<dd><var title="">B</var> in <var title="">A</var>. <span class="note">Same as <code title="gcop-source-in"><a href="#gcop-source-in">source-in</a></code> but using the destination
|
|
image instead of the source image and vice versa.</span></dd>
|
|
|
|
<dt><dfn id="gcop-destination-out" title="gcop-destination-out"><code>destination-out</code></dfn></dt>
|
|
|
|
<dd><var title="">B</var> out <var title="">A</var>. <span class="note">Same as <code title="gcop-source-out"><a href="#gcop-source-out">source-out</a></code> but using the destination
|
|
image instead of the source image and vice versa.</span></dd>
|
|
|
|
<dt><dfn id="gcop-destination-over" title="gcop-destination-over"><code>destination-over</code></dfn></dt>
|
|
|
|
<dd><var title="">B</var> over <var title="">A</var>. <span class="note">Same as <code title="gcop-source-over"><a href="#gcop-source-over">source-over</a></code> but using the
|
|
destination image instead of the source image and vice versa.</span></dd>
|
|
|
|
|
|
|
|
<dt><dfn id="gcop-lighter" title="gcop-lighter"><code>lighter</code></dfn></dt>
|
|
|
|
<dd><var title="">A</var> plus <var title="">B</var>. <span class="note">Display the
|
|
sum of the source image and destination image, with color values
|
|
approaching 255 (100%) as a limit.</span></dd>
|
|
|
|
|
|
<dt><dfn id="gcop-copy" title="gcop-copy"><code>copy</code></dfn></dt>
|
|
|
|
<dd><var title="">A</var> (<var title="">B</var> is
|
|
ignored). <span class="note">Display the source image instead of the destination
|
|
image.</span></dd>
|
|
|
|
|
|
<dt><dfn id="gcop-xor" title="gcop-xor"><code>xor</code></dfn></dt>
|
|
|
|
<dd><var title="">A</var> xor <var title="">B</var>. <span class="note">Exclusive OR
|
|
of the source image and destination image.</span></dd>
|
|
|
|
|
|
<dt class="impl"><code><var title="">vendorName</var>-<var title="">operationName</var></code></dt>
|
|
|
|
<dd class="impl">Vendor-specific extensions to the list of
|
|
composition operators should use this syntax.</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>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. <var title="">A</var> over <var title="">B</var>). They are to
|
|
be applied as part of the <a href="#drawing-model">drawing model</a>, at which point the
|
|
<a href="#clipping-region">clipping region</a> is also applied. (Without a clipping
|
|
region, these operators act on the whole bitmap with every
|
|
operation.) <a href="#refsPORTERDUFF">[PORTERDUFF]</a></p>
|
|
|
|
<p>These values are all case-sensitive — they must be used
|
|
exactly as shown. User agents must not recognize values that are not
|
|
a <span>case-sensitive</span> match for one of the values given
|
|
above.</p>
|
|
|
|
<p>On setting, if the user agent does not recognize the specified
|
|
value, it must be ignored, leaving the value of <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code>
|
|
unaffected.</p>
|
|
|
|
<p>When the context is created, the <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code>
|
|
attribute must initially have the value
|
|
<code>source-over</code>.</p>
|
|
|
|
</div><h2 id="colors-and-styles"><span class="secno">5 </span>Colors and styles</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current style used for stroking shapes.</p>
|
|
|
|
<p>Can be set, to change the stroke style.</p>
|
|
|
|
<p>The style can be either a string containing a CSS color, or a
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern">CanvasPattern</a></code>
|
|
object. Invalid values are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current style used for filling shapes.</p>
|
|
|
|
<p>Can be set, to change the fill style.</p>
|
|
|
|
<p>The style can be either a string containing a CSS color, or a
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern">CanvasPattern</a></code>
|
|
object. Invalid values are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-strokestyle" title="dom-context-2d-strokeStyle"><code>strokeStyle</code></dfn>
|
|
attribute represents the color or style to use for the lines around
|
|
shapes, and the <dfn id="dom-context-2d-fillstyle" title="dom-context-2d-fillStyle"><code>fillStyle</code></dfn>
|
|
attribute represents the color or style to use inside the
|
|
shapes.</p>
|
|
|
|
<p>Both attributes can be either strings,
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code>s, or <code><a href="#canvaspattern">CanvasPattern</a></code>s. On
|
|
setting, strings must be <span title="parsed as a CSS <color>
|
|
value">parsed as CSS <color> values</span> and the color
|
|
assigned, and <code><a href="#canvasgradient">CanvasGradient</a></code> and
|
|
<code><a href="#canvaspattern">CanvasPattern</a></code> objects must be assigned themselves. <a href="#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but
|
|
cannot be <span>parsed as a CSS <color> value</span>, or is
|
|
neither a string, a <code><a href="#canvasgradient">CanvasGradient</a></code>, nor a
|
|
<code><a href="#canvaspattern">CanvasPattern</a></code>, then it must be ignored, and the
|
|
attribute must retain its previous value.</p>
|
|
|
|
<p>When set to a <code><a href="#canvaspattern">CanvasPattern</a></code> or
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code> object, the assignment is
|
|
<span>live</span>, meaning that changes made to the object after the
|
|
assignment do affect subsequent stroking or filling of shapes.</p>
|
|
|
|
<p>On getting, if the value is a color, then the <a href="#serialization-of-a-color" title="serialization of a color">serialization of the color</a>
|
|
must be returned. Otherwise, if it is not a color but a
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code> or <code><a href="#canvaspattern">CanvasPattern</a></code>, 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.)</p>
|
|
|
|
<p>The <dfn id="serialization-of-a-color">serialization of a color</dfn> 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 <code title="">rgba()</code> functional-notation format: the literal
|
|
string <code title="">rgba</code> (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.</p>
|
|
<p>When the context is created, the <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code> and <code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code> attributes must
|
|
initially have the string value <code title="">#000000</code>.</p>
|
|
|
|
</div><hr><p>There are two types of gradients, linear gradients and radial
|
|
gradients, both represented by objects implementing the opaque
|
|
<code><a href="#canvasgradient">CanvasGradient</a></code> interface.<p id="interpolation">Once a gradient has been created (see below),
|
|
stops are placed along it to define how the colors are distributed
|
|
along the gradient. <span class="impl">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.</span><dl class="domintro"><dt><var title="">gradient</var> . <code title="dom-canvasgradient-addColorStop"><a href="#dom-canvasgradient-addcolorstop">addColorStop</a></code>(<var title="">offset</var>, <var title="">color</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>Throws an <code>INDEX_SIZE_ERR</code> exception if the offset
|
|
is out of range. Throws a <code>SYNTAX_ERR</code> exception if the
|
|
color cannot be parsed.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">gradient</var> = <var title="">context</var> . <code title="dom-context-2d-createLinearGradient"><a href="#dom-context-2d-createlineargradient">createLinearGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>, <var title="">y1</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns a <code><a href="#canvasgradient">CanvasGradient</a></code> object that represents a
|
|
linear gradient that paints along the line given by the
|
|
coordinates represented by the arguments.</p>
|
|
|
|
<p>If any of the arguments are not finite numbers, throws a
|
|
<code>NOT_SUPPORTED_ERR</code> exception.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">gradient</var> = <var title="">context</var> . <code title="dom-context-2d-createRadialGradient"><a href="#dom-context-2d-createradialgradient">createRadialGradient</a></code>(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>, <var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns a <code><a href="#canvasgradient">CanvasGradient</a></code> object that represents a
|
|
radial gradient that paints along the cone given by the circles
|
|
represented by the arguments.</p>
|
|
|
|
<p>If any of the arguments are not finite numbers, throws a
|
|
<code>NOT_SUPPORTED_ERR</code> exception. If either of the radii
|
|
are negative, throws an <code>INDEX_SIZE_ERR</code> exception.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-canvasgradient-addcolorstop" title="dom-canvasgradient-addColorStop"><code>addColorStop(<var title="">offset</var>, <var title="">color</var>)</code></dfn>
|
|
method on the <code><a href="#canvasgradient">CanvasGradient</a></code> interface adds a new stop
|
|
to a gradient. If the <var title="">offset</var> is less than 0,
|
|
greater than 1, infinite, or NaN, then an
|
|
<code>INDEX_SIZE_ERR</code> exception must be raised. If the <var title="">color</var> cannot be <span>parsed as a CSS <color>
|
|
value</span>, then a <code>SYNTAX_ERR</code> exception must be
|
|
raised. Otherwise, the gradient must have a new stop placed, at
|
|
offset <var title="">offset</var> relative to the whole gradient,
|
|
and with the color obtained by parsing <var title="">color</var> 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).</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-createlineargradient" title="dom-context-2d-createLinearGradient"><code>createLinearGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">x1</var>,
|
|
<var title="">y1</var>)</code></dfn> method takes four arguments
|
|
that represent the start point (<var title="">x0</var>, <var title="">y0</var>) and end point (<var title="">x1</var>, <var title="">y1</var>) of the gradient. If any of the arguments to <code title="dom-context-2d-createLinearGradient"><a href="#dom-context-2d-createlineargradient">createLinearGradient()</a></code>
|
|
are infinite or NaN, the method must raise a
|
|
<code>NOT_SUPPORTED_ERR</code> exception. Otherwise, the method must
|
|
return a linear <code><a href="#canvasgradient">CanvasGradient</a></code> initialized with the
|
|
specified line.</p>
|
|
|
|
<p>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 <a href="#interpolation">interpolation and
|
|
extrapolation</a> described above). The points in the linear
|
|
gradient must be transformed as described by the <a href="#transformations" title="dom-context-2d-transformation">current transformation
|
|
matrix</a> when rendering.</p>
|
|
|
|
<p>If <span title=""><var title="">x0</var> = <var title="">x1</var></span> and <span title=""><var title="">y0</var> = <var title="">y1</var></span>, then
|
|
the linear gradient must paint nothing.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-createradialgradient" title="dom-context-2d-createRadialGradient"><code>createRadialGradient(<var title="">x0</var>, <var title="">y0</var>, <var title="">r0</var>,
|
|
<var title="">x1</var>, <var title="">y1</var>, <var title="">r1</var>)</code></dfn> method takes six arguments, the
|
|
first three representing the start circle with origin (<var title="">x0</var>, <var title="">y0</var>) and radius <var title="">r0</var>, and the last three representing the end circle
|
|
with origin (<var title="">x1</var>, <var title="">y1</var>) and
|
|
radius <var title="">r1</var>. The values are in coordinate space
|
|
units. If any of the arguments are infinite or NaN, a
|
|
<code>NOT_SUPPORTED_ERR</code> exception must be raised. If either
|
|
of <var title="">r0</var> or <var title="">r1</var> are negative, an
|
|
<code>INDEX_SIZE_ERR</code> exception must be raised. Otherwise,
|
|
the method must return a radial <code><a href="#canvasgradient">CanvasGradient</a></code>
|
|
initialized with the two specified circles.</p>
|
|
|
|
<p>Radial gradients must be rendered by following these steps:</p>
|
|
|
|
<ol><li><p>If <span title=""><var title="">x<sub>0</sub></var> = <var title="">x<sub>1</sub></var></span> and <span title=""><var title="">y<sub>0</sub></var> = <var title="">y<sub>1</sub></var></span> and <span title=""><var title="">r<sub>0</sub></var> = <var title="">r<sub>1</sub></var></span>, then the radial gradient must
|
|
paint nothing. Abort these steps.</li>
|
|
|
|
<li>
|
|
|
|
<p>Let <span title="">x(<var title="">ω</var>) = (<var title="">x<sub>1</sub></var>-<var title="">x<sub>0</sub></var>)<var title="">ω</var> + <var title="">x<sub>0</sub></var></span></p>
|
|
|
|
<p>Let <span title="">y(<var title="">ω</var>) = (<var title="">y<sub>1</sub></var>-<var title="">y<sub>0</sub></var>)<var title="">ω</var> + <var title="">y<sub>0</sub></var></span></p>
|
|
|
|
<p>Let <span title="">r(<var title="">ω</var>) = (<var title="">r<sub>1</sub></var>-<var title="">r<sub>0</sub></var>)<var title="">ω</var> + <var title="">r<sub>0</sub></var></span></p>
|
|
|
|
<p>Let the color at <var title="">ω</var> be the color at
|
|
that position on the gradient (with the colors coming from the <a href="#interpolation">interpolation and extrapolation</a>
|
|
described above).</p>
|
|
|
|
</li>
|
|
|
|
<li><p>For all values of <var title="">ω</var> where <span title="">r(<var title="">ω</var>) > 0</span>,
|
|
starting with the value of <var title="">ω</var> nearest to
|
|
positive infinity and ending with the value of <var title="">ω</var> nearest to negative infinity, draw the
|
|
circumference of the circle with radius <span title="">r(<var title="">ω</var>)</span> at position (<span title="">x(<var title="">ω</var>)</span>, <span title="">y(<var title="">ω</var>)</span>), with the color at <var title="">ω</var>, 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.</li>
|
|
|
|
</ol><p class="note">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).</p>
|
|
|
|
<p>The points in the radial gradient must be transformed as
|
|
described by the <a href="#transformations" title="dom-context-2d-transformation">current
|
|
transformation matrix</a> when rendering.</p>
|
|
|
|
<p>Gradients must be painted only where the relevant stroking or
|
|
filling effects requires that they be drawn.</p>
|
|
|
|
|
|
</div><hr><p>Patterns are represented by objects implementing the opaque
|
|
<code><a href="#canvaspattern">CanvasPattern</a></code> interface.<dl class="domintro"><dt><var title="">pattern</var> = <var title="">context</var> . <code title="dom-context-2d-createPattern"><a href="#dom-context-2d-createpattern">createPattern</a></code>(<var title="">image</var>, <var title="">repetition</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns a <code><a href="#canvaspattern">CanvasPattern</a></code> object that uses the given image
|
|
and repeats in the direction(s) given by the <var title="">repetition</var> argument.</p>
|
|
|
|
<p>The allowed values for <var title="">repetition</var> are <code title="">repeat</code> (both directions), <code title="">repeat-x</code> (horizontal only), <code title="">repeat-y</code> (vertical only), and <code title="">no-repeat</code> (neither). If the <var title="">repetition</var> argument is empty or null, the value
|
|
<code title="">repeat</code> is used.</p>
|
|
|
|
<p>If the first argument isn't an <code>img</code>,
|
|
<code>canvas</code>, or <code>video</code> element, throws a
|
|
<code>TYPE_MISMATCH_ERR</code> exception. If the image has no
|
|
image data, throws an <code>INVALID_STATE_ERR</code> exception. If
|
|
the second argument isn't one of the allowed values, throws a
|
|
<code>SYNTAX_ERR</code> exception. If the image isn't yet fully
|
|
decoded, then the method returns null.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>To create objects of this type, the <dfn id="dom-context-2d-createpattern" title="dom-context-2d-createPattern"><code>createPattern(<var title="">image</var>, <var title="">repetition</var>)</code></dfn>
|
|
method is used. The first argument gives the image to use as the
|
|
pattern (either an <code>HTMLImageElement</code>,
|
|
<code>HTMLCanvasElement</code>, or <code>HTMLVideoElement</code>
|
|
object). Modifying this image after calling the <code title="dom-context-2d-createPattern"><a href="#dom-context-2d-createpattern">createPattern()</a></code> method
|
|
must not affect the pattern. The second argument must be a string
|
|
with one of the following values: <code title="">repeat</code>,
|
|
<code title="">repeat-x</code>, <code title="">repeat-y</code>,
|
|
<code title="">no-repeat</code>. If the empty string or null is
|
|
specified, <code title="">repeat</code> must be assumed. If an
|
|
unrecognized value is given, then the user agent must raise a
|
|
<code>SYNTAX_ERR</code> 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
|
|
<code><a href="#canvaspattern">CanvasPattern</a></code> object suitably initialized.</p>
|
|
|
|
<p>The <var title="">image</var> argument is an instance of either
|
|
<code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, or
|
|
<code>HTMLVideoElement</code>. If the <var title="">image</var> is
|
|
null, the implementation must raise a <code>TYPE_MISMATCH_ERR</code>
|
|
exception.</p>
|
|
|
|
<p>If the <var title="">image</var> argument is an
|
|
<code>HTMLImageElement</code> object that is not <span title="img-good">fully decodable</span>, or if the <var title="">image</var> argument is an <code>HTMLVideoElement</code>
|
|
object whose <code title="dom-media-readyState">readyState</code>
|
|
attribute is either <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
|
|
implementation must return null.</p>
|
|
<p>If the <var title="">image</var> argument is an
|
|
<code>HTMLCanvasElement</code> object with either a horizontal
|
|
dimension or a vertical dimension equal to zero, then the
|
|
implementation must raise an <code>INVALID_STATE_ERR</code>
|
|
exception.</p>
|
|
|
|
|
|
<p>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
|
|
<code>repeat-x</code> string was specified) or vertically up and
|
|
down (if the <code>repeat-y</code> string was specified) or in all
|
|
four directions all over the canvas (if the <code>repeat</code>
|
|
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.</p>
|
|
|
|
<p>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
|
|
<var title="">repetition</var>.)
|
|
|
|
|
|
<p>When the <code title="dom-context-2d-createPattern"><a href="#dom-context-2d-createpattern">createPattern()</a></code> method
|
|
is passed an animated image as its <var title="">image</var>
|
|
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.</p>
|
|
|
|
|
|
<p>When the <var title="">image</var> argument is an
|
|
<code>HTMLVideoElement</code>, then the frame at the <span>current
|
|
playback position</span> must be used as the source image, and the
|
|
source image's dimensions must be the <span title="concept-video-intrinsic-width">intrinsic width</span> and
|
|
<span title="concept-video-intrinsic-height">intrinsic height</span>
|
|
of the <span>media resource</span> (i.e. after any aspect-ratio
|
|
correction has been applied).</p>
|
|
|
|
|
|
|
|
</div><h2 id="line-styles"><span class="secno">6 </span>Line styles</h2><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current line width.</p>
|
|
|
|
<p>Can be set, to change the line width. Values that are not
|
|
finite values greater than zero are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-lineCap"><a href="#dom-context-2d-linecap">lineCap</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current line cap style.</p>
|
|
|
|
<p>Can be set, to change the line cap style.</p>
|
|
|
|
<p>The possible line cap styles are <code>butt</code>,
|
|
<code>round</code>, and <code>square</code>. Other values are
|
|
ignored.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current line join style.</p>
|
|
|
|
<p>Can be set, to change the line join style.</p>
|
|
|
|
<p>The possible line join styles are <code>bevel</code>,
|
|
<code>round</code>, and <code>miter</code>. Other values are
|
|
ignored.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-miterLimit"><a href="#dom-context-2d-miterlimit">miterLimit</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current miter limit ratio.</p>
|
|
|
|
<p>Can be set, to change the miter limit ratio. Values that are
|
|
not finite values greater than zero are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-linewidth" title="dom-context-2d-lineWidth"><code>lineWidth</code></dfn>
|
|
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.</p>
|
|
|
|
<p>When the context is created, the <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code> attribute must
|
|
initially have the value <code>1.0</code>.</p>
|
|
|
|
<hr><p>The <dfn id="dom-context-2d-linecap" title="dom-context-2d-lineCap"><code>lineCap</code></dfn> attribute
|
|
defines the type of endings that UAs will place on the end of
|
|
lines. The three valid values are <code>butt</code>,
|
|
<code>round</code>, and <code>square</code>. The <code>butt</code>
|
|
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 <code>round</code> 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 <code>square</code> 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.</p>
|
|
|
|
<p>On getting, it must return the current value. On setting, if the
|
|
new value is one of the literal strings <code>butt</code>,
|
|
<code>round</code>, and <code>square</code>, then the current value
|
|
must be changed to the new value; other values must ignored, leaving
|
|
the value unchanged.</p>
|
|
|
|
<p>When the context is created, the <code title="dom-context-2d-lineCap"><a href="#dom-context-2d-linecap">lineCap</a></code> attribute must
|
|
initially have the value <code>butt</code>.</p>
|
|
|
|
<hr><p>The <dfn id="dom-context-2d-linejoin" title="dom-context-2d-lineJoin"><code>lineJoin</code></dfn>
|
|
attribute defines the type of corners that UAs will place where two
|
|
lines meet. The three valid values are <code>bevel</code>,
|
|
<code>round</code>, and <code>miter</code>.</p>
|
|
|
|
<p>On getting, it must return the current value. On setting, if the
|
|
new value is one of the literal strings <code>bevel</code>,
|
|
<code>round</code>, and <code>miter</code>, then the current value
|
|
must be changed to the new value; other values must be ignored,
|
|
leaving the value unchanged.</p>
|
|
|
|
<p>When the context is created, the <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code> attribute must
|
|
initially have the value <code>miter</code>.</p>
|
|
|
|
<hr><p>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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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 <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code> attribute controls
|
|
whether anything else is rendered. The three aforementioned values
|
|
have the following meanings:</p>
|
|
|
|
<p>The <code>bevel</code> value means that this is all that is
|
|
rendered at joins.</p>
|
|
|
|
<p>The <code>round</code> 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.</p>
|
|
|
|
<p>The <code>miter</code> 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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>The miter limit ratio can be explicitly set using the <dfn id="dom-context-2d-miterlimit" title="dom-context-2d-miterLimit"><code>miterLimit</code></dfn>
|
|
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.</p>
|
|
|
|
<p>When the context is created, the <code title="dom-context-2d-miterLimit"><a href="#dom-context-2d-miterlimit">miterLimit</a></code> attribute must
|
|
initially have the value <code>10.0</code>.</p>
|
|
|
|
|
|
</div><h2 id="shadows"><span class="secno">7 </span><dfn>Shadows</dfn></h2><p>All drawing operations are affected by the four global shadow
|
|
attributes.<dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current shadow color.</p>
|
|
|
|
<p>Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-shadowOffsetX"><a href="#dom-context-2d-shadowoffsetx">shadowOffsetX</a></code> [ = <var title="">value</var> ]</dt>
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-shadowOffsetY"><a href="#dom-context-2d-shadowoffsety">shadowOffsetY</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current shadow offset.</p>
|
|
|
|
<p>Can be set, to change the shadow offset. Values that are not finite numbers are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-shadowBlur"><a href="#dom-context-2d-shadowblur">shadowBlur</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current level of blur applied to shadows.</p>
|
|
|
|
<p>Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-shadowcolor" title="dom-context-2d-shadowColor"><code>shadowColor</code></dfn>
|
|
attribute sets the color of the shadow.</p>
|
|
|
|
<p>When the context is created, the <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code> attribute
|
|
initially must be fully-transparent black.</p>
|
|
|
|
<p>On getting, the <a href="#serialization-of-a-color" title="serialization of a
|
|
color">serialization of the color</a> must be returned.</p>
|
|
|
|
<p>On setting, the new value must be <span>parsed as a CSS
|
|
<color> value</span> 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. <a href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
|
|
|
|
<p>The <dfn id="dom-context-2d-shadowoffsetx" title="dom-context-2d-shadowOffsetX"><code>shadowOffsetX</code></dfn>
|
|
and <dfn id="dom-context-2d-shadowoffsety" title="dom-context-2d-shadowOffsetY"><code>shadowOffsetY</code></dfn>
|
|
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.</p>
|
|
|
|
<p>When the context is created, the shadow offset attributes must
|
|
initially have the value <code>0</code>.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-shadowblur" title="dom-context-2d-shadowBlur"><code>shadowBlur</code></dfn>
|
|
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.)</p>
|
|
|
|
<p>When the context is created, the <code title="dom-context-2d-shadowBlur"><a href="#dom-context-2d-shadowblur">shadowBlur</a></code> attribute must
|
|
initially have the value <code>0</code>.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p><dfn id="when-shadows-are-drawn" title="when shadows are drawn">Shadows are only drawn
|
|
if</dfn> the opacity component of the alpha component of the color
|
|
of <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code> is
|
|
non-zero and either the <code title="dom-context-2d-shadowBlur"><a href="#dom-context-2d-shadowblur">shadowBlur</a></code> is non-zero, or
|
|
the <code title="dom-context-2d-shadowOffsetX"><a href="#dom-context-2d-shadowoffsetx">shadowOffsetX</a></code>
|
|
is non-zero, or the <code title="dom-context-2d-shadowOffsetY"><a href="#dom-context-2d-shadowoffsety">shadowOffsetY</a></code> is
|
|
non-zero.</p>
|
|
|
|
<p><a href="#when-shadows-are-drawn">When shadows are drawn</a>, they must be rendered as follows:</p>
|
|
|
|
<ol><li> <p>Let <var title="">A</var> be an infinite transparent black
|
|
bitmap on which the source image for which a shadow is being
|
|
created has been rendered.</p> </li>
|
|
|
|
<li> <p>Let <var title="">B</var> be an infinite transparent black
|
|
bitmap, with a coordinate space and an origin identical to <var title="">A</var>.</p> </li>
|
|
|
|
<li> <p>Copy the alpha channel of <var title="">A</var> to <var title="">B</var>, offset by <code title="dom-context-2d-shadowOffsetX"><a href="#dom-context-2d-shadowoffsetx">shadowOffsetX</a></code> in the
|
|
positive <var title="">x</var> direction, and <code title="dom-context-2d-shadowOffsetY"><a href="#dom-context-2d-shadowoffsety">shadowOffsetY</a></code> in the
|
|
positive <var title="">y</var> direction.</p> </li>
|
|
|
|
<li> <p>If <code title="dom-context-2d-shadowBlur"><a href="#dom-context-2d-shadowblur">shadowBlur</a></code> is greater than
|
|
0:</p>
|
|
|
|
<ol><li> <p>Let <var title="">σ</var> be half the value of
|
|
<code title="dom-context-2d-shadowBlur"><a href="#dom-context-2d-shadowblur">shadowBlur</a></code>.</li>
|
|
|
|
<li> <p>Perform a 2D Gaussian Blur on <var title="">B</var>,
|
|
using <var title="">σ</var> as the standard deviation.</p>
|
|
</li>
|
|
|
|
</ol><p>User agents may limit values of <var title="">σ</var> to
|
|
an implementation-specific maximum value to avoid exceeding
|
|
hardware limitations during the Gaussian blur operation.</p>
|
|
|
|
</li>
|
|
|
|
<li> <p>Set the red, green, and blue components of every pixel in
|
|
<var title="">B</var> to the red, green, and blue components
|
|
(respectively) of the color of <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code>.</p> </li>
|
|
|
|
<li> <p>Multiply the alpha component of every pixel in <var title="">B</var> by the alpha component of the color of <code title="dom-context-2d-shadowColor"><a href="#dom-context-2d-shadowcolor">shadowColor</a></code>.</p> </li>
|
|
|
|
<li> <p>The shadow is in the bitmap <var title="">B</var>, and is
|
|
rendered as part of the <a href="#drawing-model">drawing model</a> described below.</p> </li>
|
|
|
|
</ol></div><p>If the current composition operation is <code title="gcop-copy"><a href="#gcop-copy">copy</a></code>, shadows effectively won't render
|
|
(since the shape will overwrite the shadow).<h2 id="simple-shapes-rectangles"><span class="secno">8 </span>Simple shapes (rectangles)</h2><p>There are three methods that immediately draw rectangles to the
|
|
bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
|
|
left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
|
|
respectively.<div class="impl">
|
|
|
|
<p>The <a href="#transformations" title="dom-context-2d-transformation">current
|
|
transformation matrix</a> must be applied to the following four
|
|
coordinates, which form the path that must then be closed to get the
|
|
specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
|
|
<span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
|
|
<span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
|
|
<span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
|
|
|
|
<p>Shapes are painted without affecting the current path, and are
|
|
subject to the <a href="#clipping-region" title="clipping region">clipping region</a>,
|
|
and, with the exception of <code title="dom-context-2d-clearRect"><a href="#dom-context-2d-clearrect">clearRect()</a></code>, also <a href="#shadows" title="shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, and <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
|
|
operators</a>.</p>
|
|
|
|
</div><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-clearRect"><a href="#dom-context-2d-clearrect">clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-fillRect"><a href="#dom-context-2d-fillrect">fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Paints the given rectangle onto the canvas, using the current fill style.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-strokeRect"><a href="#dom-context-2d-strokerect">strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-clearrect" title="dom-context-2d-clearRect"><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> 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.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-fillrect" title="dom-context-2d-fillRect"><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
|
|
rectangular area using the <code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code>. If either height
|
|
or width are zero, this method has no effect.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-strokerect" title="dom-context-2d-strokeRect"><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
|
|
rectangle's path using the <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code>, <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code>, <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code>, and (if
|
|
appropriate) <code title="dom-context-2d-miterLimit"><a href="#dom-context-2d-miterlimit">miterLimit</a></code> 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).</p>
|
|
|
|
</div><h2 id="complex-shapes-paths"><span class="secno">9 </span>Complex shapes (paths)</h2><p>The context always has a current path. There is only one current
|
|
path, it is not part of the <a href="#drawing-state">drawing state</a>.<p>A <dfn id="path">path</dfn> 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.<dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-beginPath"><a href="#dom-context-2d-beginpath">beginPath</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Resets the current path.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-moveTo"><a href="#dom-context-2d-moveto">moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Creates a new subpath with the given point.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-closePath"><a href="#dom-context-2d-closepath">closePath</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>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.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-lineTo"><a href="#dom-context-2d-lineto">lineTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Adds the given point to the current subpath, connected to the previous one by a straight line.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-quadraticCurveTo"><a href="#dom-context-2d-quadraticcurveto">quadraticCurveTo</a></code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Adds the given point to the current subpath, connected to the previous one by a quadratic Bézier curve with the given control point.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-bezierCurveTo"><a href="#dom-context-2d-beziercurveto">bezierCurveTo</a></code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Adds the given point to the current subpath, connected to the previous one by a cubic Bézier curve with the given control points.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-arcTo"><a href="#dom-context-2d-arcto">arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Adds an arc with the given control points and radius to the
|
|
current subpath, connected to the previous point by a straight
|
|
line.</p>
|
|
|
|
<p>Throws an <code>INDEX_SIZE_ERR</code> exception if the given
|
|
radius is negative.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-arc"><a href="#dom-context-2d-arc">arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
|
|
|
|
<dd>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>Throws an <code>INDEX_SIZE_ERR</code> exception if the given
|
|
radius is negative.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-rect"><a href="#dom-context-2d-rect">rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Adds a new closed subpath to the path, representing the given rectangle.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-fill"><a href="#dom-context-2d-fill">fill</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Fills the subpaths with the current fill style.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-stroke"><a href="#dom-context-2d-stroke">stroke</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Strokes the subpaths with the current stroke style.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-clip"><a href="#dom-context-2d-clip">clip</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Further constrains the clipping region to the given path.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-isPointInPath"><a href="#dom-context-2d-ispointinpath">isPointInPath</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the given point is in the current path.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>Initially, the context's path must have zero subpaths.</p>
|
|
|
|
<p>The points and lines added to the path by these methods must be
|
|
transformed according to the <a href="#transformations" title="dom-context-2d-transformation">current transformation
|
|
matrix</a> as they are added.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-beginpath" title="dom-context-2d-beginPath"><code>beginPath()</code></dfn>
|
|
method must empty the list of subpaths so that the context once
|
|
again has zero subpaths.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-moveto" title="dom-context-2d-moveTo"><code>moveTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
|
|
create a new subpath with the specified point as its first (and
|
|
only) point.</p>
|
|
|
|
<p>When the user agent is to <dfn id="ensure-there-is-a-subpath">ensure there is a subpath</dfn>
|
|
for a coordinate (<var title="">x</var>, <var title="">y</var>), 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 (<var title="">x</var>, <var title="">y</var>) as its first
|
|
(and only) point, as if the <code title="dom-context-2d-moveTo"><a href="#dom-context-2d-moveto">moveTo()</a></code> method had been
|
|
called.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-closepath" title="dom-context-2d-closePath"><code>closePath()</code></dfn>
|
|
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.</p>
|
|
|
|
<p class="note">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) <code title="dom-context-2d-moveTo"><a href="#dom-context-2d-moveto">moveTo()</a></code> call.</p>
|
|
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-lineto" title="dom-context-2d-lineTo"><code>lineTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
|
|
<a href="#ensure-there-is-a-subpath">ensure there is a subpath</a> for <span title="">(<var title="">x</var>, <var title="">y</var>)</span> if the context has
|
|
no subpaths. Otherwise, it must connect the last point in the
|
|
subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a straight line, and must then add the given
|
|
point (<var title="">x</var>, <var title="">y</var>) to the
|
|
subpath.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-quadraticcurveto" title="dom-context-2d-quadraticCurveTo"><code>quadraticCurveTo(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>,
|
|
<var title="">y</var>)</code></dfn> method must <a href="#ensure-there-is-a-subpath">ensure there
|
|
is a subpath</a> for <span title="">(<var title="">cpx</var>,
|
|
<var title="">cpy</var>)</span>, and then must connect the last
|
|
point in the subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a quadratic Bézier curve with control
|
|
point (<var title="">cpx</var>, <var title="">cpy</var>), and must
|
|
then add the given point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href="#refsBEZIER">[BEZIER]</a></p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-beziercurveto" title="dom-context-2d-bezierCurveTo"><code>bezierCurveTo(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method must
|
|
<a href="#ensure-there-is-a-subpath">ensure there is a subpath</a> for <span title="">(<var title="">cp1x</var>, <var title="">cp1y</var>)</span>, and then must
|
|
connect the last point in the subpath to the given point (<var title="">x</var>, <var title="">y</var>) using a cubic Bézier
|
|
curve with control points (<var title="">cp1x</var>, <var title="">cp1y</var>) and (<var title="">cp2x</var>, <var title="">cp2y</var>). Then, it must add the point (<var title="">x</var>, <var title="">y</var>) to the subpath. <a href="#refsBEZIER">[BEZIER]</a></p>
|
|
|
|
<hr><p>The <dfn id="dom-context-2d-arcto" title="dom-context-2d-arcTo"><code>arcTo(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>,
|
|
<var title="">y2</var>, <var title="">radius</var>)</code></dfn>
|
|
method must first <a href="#ensure-there-is-a-subpath">ensure there is a subpath</a> for <span title="">(<var title="">x1</var>, <var title="">y1</var>)</span>. Then, the behavior depends on the
|
|
arguments and the last point in the subpath, as described below.</p>
|
|
|
|
<p>Negative values for <var title="">radius</var> must cause the
|
|
implementation to raise an <code>INDEX_SIZE_ERR</code>
|
|
exception.</p>
|
|
|
|
<p>Let the point (<var title="">x0</var>, <var title="">y0</var>) be
|
|
the last point in the subpath.</p>
|
|
|
|
<p>If the point (<var title="">x0</var>, <var title="">y0</var>) is
|
|
equal to the point (<var title="">x1</var>, <var title="">y1</var>),
|
|
or if the point (<var title="">x1</var>, <var title="">y1</var>) is
|
|
equal to the point (<var title="">x2</var>, <var title="">y2</var>),
|
|
or if the radius <var title="">radius</var> is zero, then the method
|
|
must add the point (<var title="">x1</var>, <var title="">y1</var>)
|
|
to the subpath, and connect that point to the previous point (<var title="">x0</var>, <var title="">y0</var>) by a straight line.</p>
|
|
|
|
<p>Otherwise, if the points (<var title="">x0</var>, <var title="">y0</var>), (<var title="">x1</var>, <var title="">y1</var>), and (<var title="">x2</var>, <var title="">y2</var>) all lie on a single straight line, then the
|
|
method must add the point (<var title="">x1</var>, <var title="">y1</var>) to the subpath, and connect that point to the
|
|
previous point (<var title="">x0</var>, <var title="">y0</var>) by a
|
|
straight line.</p>
|
|
|
|
<p>Otherwise, let <var title="">The Arc</var> be the shortest arc
|
|
given by circumference of the circle that has radius <var title="">radius</var>, and that has one point tangent to the
|
|
half-infinite line that crosses the point (<var title="">x0</var>,
|
|
<var title="">y0</var>) and ends at the point (<var title="">x1</var>, <var title="">y1</var>), and that has a different
|
|
point tangent to the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
|
|
(<var title="">x2</var>, <var title="">y2</var>). 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
|
|
(<var title="">x0</var>, <var title="">y0</var>) 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 <var title="">The Arc</var>, adding the end
|
|
tangent point to the subpath.</p>
|
|
|
|
<hr><p>The <dfn id="dom-context-2d-arc" title="dom-context-2d-arc"><code>arc(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>,
|
|
<var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> 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:</p>
|
|
|
|
<p>Consider a circle that has its origin at (<var title="">x</var>,
|
|
<var title="">y</var>) and that has radius <var title="">radius</var>. The points at <var title="">startAngle</var>
|
|
and <var title="">endAngle</var> along this circle's circumference,
|
|
measured in radians clockwise from the positive x-axis, are the
|
|
start and end points respectively.</p>
|
|
|
|
<p>If the <var title="">anticlockwise</var> argument is omitted or
|
|
false and <span title=""><var title="">endAngle</var>-<var title="">startAngle</var></span> is equal to or greater than <span title="">2π</span>, or, if the <var title="">anticlockwise</var>
|
|
argument is <em>true</em> and <span title=""><var title="">startAngle</var>-<var title="">endAngle</var></span> is
|
|
equal to or greater than <span title="">2π</span>, then the arc
|
|
is the whole circumference of this circle.</p>
|
|
|
|
<p>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 <var title="">anticlockwise</var> 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 <span title="">2π</span> 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.</p>
|
|
|
|
<p>Negative values for <var title="">radius</var> must cause the
|
|
implementation to raise an <code>INDEX_SIZE_ERR</code>
|
|
exception.</p>
|
|
|
|
<hr><p>The <dfn id="dom-context-2d-rect" title="dom-context-2d-rect"><code>rect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must create a new subpath
|
|
containing just the four points (<var title="">x</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>,
|
|
<var title="">y</var>), (<var title="">x</var>+<var title="">w</var>, <var title="">y</var>+<var title="">h</var>),
|
|
(<var title="">x</var>, <var title="">y</var>+<var title="">h</var>), 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 (<var title="">x</var>, <var title="">y</var>) as the only point in the subpath.</p>
|
|
|
|
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-fill" title="dom-context-2d-fill"><code>fill()</code></dfn>
|
|
method must fill all the subpaths of the current path, using
|
|
<code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code>, and using
|
|
the non-zero winding number rule. Open subpaths must be implicitly
|
|
closed when being filled (without affecting the actual
|
|
subpaths).</p>
|
|
|
|
<p class="note">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.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-stroke" title="dom-context-2d-stroke"><code>stroke()</code></dfn> method
|
|
must calculate the strokes of all the subpaths of the current path,
|
|
using the <code title="dom-context-2d-lineWidth"><a href="#dom-context-2d-linewidth">lineWidth</a></code>,
|
|
<code title="dom-context-2d-lineCap"><a href="#dom-context-2d-linecap">lineCap</a></code>, <code title="dom-context-2d-lineJoin"><a href="#dom-context-2d-linejoin">lineJoin</a></code>, and (if
|
|
appropriate) <code title="dom-context-2d-miterLimit"><a href="#dom-context-2d-miterlimit">miterLimit</a></code> attributes, and
|
|
then fill the combined stroke area using the <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code>
|
|
attribute.</p>
|
|
|
|
<p class="note">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.</p>
|
|
|
|
<p>Paths, when filled or stroked, must be painted without affecting
|
|
the current path, and must be subject to <a href="#shadows" title="shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the <a href="#clipping-region" title="clipping region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
|
|
operators</a>. (Transformations affect the path when the path is
|
|
created, not when it is painted, though the stroke <em>style</em> is
|
|
still affected by the transformation during painting.)</p>
|
|
|
|
<p>Zero-length line segments must be pruned before stroking a
|
|
path. Empty subpaths must be ignored.</p>
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-clip" title="dom-context-2d-clip"><code>clip()</code></dfn>
|
|
method must create a new <dfn id="clipping-region">clipping region</dfn> 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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-ispointinpath" title="dom-context-2d-isPointInPath"><code>isPointInPath(<var title="">x</var>, <var title="">y</var>)</code></dfn> method must
|
|
return true if the point given by the <var title="">x</var> and <var title="">y</var> 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.</p>
|
|
|
|
</div><h2 id="focus-management"><span class="secno">10 </span>Focus management</h2><p>When a canvas is interactive, authors should include focusable
|
|
elements in the element's fallback content corresponding to each
|
|
focusable part of the canvas.<p>To indicate which focusable part of the canvas is currently
|
|
focused, authors should use the <code title="dom-context-2d-drawFocusRing"><a href="#dom-context-2d-drawfocusring">drawFocusRing()</a></code> 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. <dl class="domintro"><dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title="dom-context-2d-drawFocusRing"><a href="#dom-context-2d-drawfocusring">drawFocusRing</a></code>(<var title="">element</var>, [ <var title="">canDrawCustom</var> ])</dt>
|
|
|
|
<dd>
|
|
|
|
<p>If the given element is focused or a descendant of the element with focus, draws a focus ring around the
|
|
current path, following the platform conventions for focus
|
|
rings. </p>
|
|
|
|
<p>If the <var title="">canDrawCustom</var> 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.)</p>
|
|
|
|
<p>Returns true if the given element is focused, the <var title="">canDrawCustom</var> argument is true, and the user has
|
|
not configured his system to draw focus rings in a particular
|
|
manner. Otherwise, returns false.</p>
|
|
|
|
<p>When the method returns true, the author is expected to
|
|
manually draw a focus ring.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The drawing path is used to form the focus ring provided that
|
|
drawing path contains a closed path. The drawing path is used to
|
|
form a best fit bounding rectangle in screen coordinates. The
|
|
bounding rectangle and drawing path may be used to enhance
|
|
accessibility properties <a href="#refsARIA">[ARIA]</a> for the
|
|
targeted element.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-drawfocusring" title="dom-context-2d-drawFocusRing"><code>drawFocusRing(<var title="">element</var>, [<var title="">canDrawCustom</var>])</code></dfn>
|
|
method, when invoked, must run the following steps:</p>
|
|
|
|
<ol><li><p>If the <var title="">element</var> 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.</li>
|
|
|
|
<li><p>If supporting an accessibility API, implementors may use the drawing path to form a best fit rectangle in screen coordinates and apply it to the bounding rectangle of the associated accessible object. </li>
|
|
|
|
<li>
|
|
|
|
<p>If the user has requested the use of particular focus rings
|
|
(e.g. high-contrast focus rings), or if the <var title="">canDrawCustom</var> 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.</p>
|
|
|
|
<p>The focus ring should not be subject to the <a href="#shadows" title="shadows">shadow effects</a>, the <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, or the <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
|
|
operators</a>, but <em>should</em> be subject to the <a href="#clipping-region" title="clipping region">clipping region</a>.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Return true.</li>
|
|
|
|
</ol></div>
|
|
|
|
<h2 id="caret-selection"><span class="secno">11 </span>Caret and selection management</h2>
|
|
<p>
|
|
|
|
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.
|
|
</p>
|
|
<!--
|
|
<p class="XXX annotation"><b>Status: </b><i>Ideally setCaretSelectionRect() and caretBlinkRate() should be managed under the covers by canvas methods that draw carets or content selections. If <a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=10248">defect 10248</a> and <a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=10249">defect 10249</a> are accepted with the provisions for supporting accessibility services we can operate off those methods to complete to address the caret and selection position tracking component of Issue-74. </i></p>
|
|
-->
|
|
<p>The <code title="dom-context-2d-setCaretSelectionRect"><a href="#dom-context-2d-setCaretSelectionRect">setCaretSelectionRect()</a></code> method should be used
|
|
to indicate the location of the last rendered <a href="#caretpos" title="caret position">caret position</a> or <a href="#selectionpos" title="selection position">selection position</a> on the canvas, passing it the canvas fallback element
|
|
associated with the last drawn of either the caret position or the selection.</p>
|
|
|
|
<!--
|
|
<p>Authors MUST use the <code title="dom-context-2d-setCaretSelectionRect"><a href="#dom-context-2d-setCaretSelectionRect">setCaretSelectionRect()</a></code> method,
|
|
to indicate the pixel location of the last rendered of either caret
|
|
or selection position on the focused canvas, passing it the element
|
|
associated with the last drawn of either the caret position or the
|
|
selected text.</p>
|
|
-->
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>To access the system caret blink rate in canvas use the
|
|
<code title="dom-context-2d-caretBlinkRate"><a href="#dom-context-2d-caretBlinkRate">caretBlinkRate()</a></code> method</p>
|
|
|
|
<p>
|
|
|
|
<dl class="domintro"><dt><var title="">success</var> = <var title="">context</var> . <code title="dom-context-2d-setCaretSelectionRect"><a href="#dom-context-2d-setCaretSelectionRect">setCaretSelectionRect</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns true if the given element is focused or a document descendant of an element with focus. Otherwise, returns false.</p>
|
|
<!--
|
|
<p>The given coordinates (<var title="">x</var>, <var title="">y</var>) are relative to the outer edge of the caret or selection position where the edge represents the left or right edge in the direction of the user's selection.</p>
|
|
<p>The <var title="">w</var> and <var title="">h</var> are supplied to indicate the respective width of the caret and height of the caret or selection point. Authors should compute the height based on the font height of the associated character, in pixels, and the width of the caret or nearest associated selected character.</p>
|
|
<p>The top left pixel coordinate of the caret or selection position must be given in the <var title="">x</var> and <var title="">y</var> arguments. When this coordinate is the selection position, the top left pixel coordinate must be positioned equivalent to the top left pixel location of the last character selected. Additionally, the <var title="">w</var> and <var title="">h</var> are supplied to indicate the width and height of the caret or selection point. Authors must compute the height based on the font height of the associated character, in pixels. In the case of a caret, authors must compute the width based on the caret's with in pixels. In the case of a selected character the width must correspond to the width of the last selected character in pixels. </p>
|
|
-->
|
|
</dd>
|
|
|
|
<dt><var title="">rate</var> = <var title="">context</var> . <code title="dom-context-2d-caretBlinkRate"><a href="#dom-context-2d-caretBlinkRate">caretBlinkRate</a></code>()</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the blink rate of the system in milliseconds if supported. Otherwise, returns -1 if it is unsupported by the system.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
<!--
|
|
<p>When this last rendered screen position is the selection position, the screen position must be equivalent to the the pixel location of the outer top left or right corner of the last character selected in the direction (left or right) of the selection. A rectangle is used to represent this position as carets may vary in width and at large magnification levels the width of the caret may be important in determining where to magnify.</p>
|
|
-->
|
|
|
|
<p class="note">Screen magnifiers, used by low vision users, use this position to move the magnification point on the screen.</p>
|
|
|
|
<!--
|
|
<p>For user agents that support an accessibility API, these coordinates are converted to screen coordinates within the user agent and used to notify the assistive technology of the change in either the current caret or selection position.</p>
|
|
<p>The caret position is typically the last rendered screen position of either the end of the last visible selected character, or the caret position when the associated text has focus or is a descendant of an element that has focus.</p>
|
|
<p class="note">Some systems follow a convention whereby caret position does not track the selected text, in which case the last drawn position must be tracked. Furthermore, when <var title="">element</var> is a descendent of an element with focus there must be only one descendent of the element with focus that has either a caret or selection position and the last call to this function must be for the last caret or selection drawn. </p>
|
|
-->
|
|
|
|
|
|
<p>The <dfn id="dom-context-2d-setCaretSelectionRect" title="dom-context-2d-setCaretSelectionRect"><code>setCaretSelectionRect(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn>
|
|
|
|
method, when invoked, must run the following steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If <var title="">element</var> does not have selected content and is not focused return false and abort these steps.</p></li>
|
|
<!-- <li><p>If <var title="">element</var> does have a caret but is not focused then return false and abort these steps </p></li> -->
|
|
<li><p>If the element is not a descendant of the element with whose context the method is associated, then return false and abort these step.</p></li>
|
|
|
|
<li><p>Transform the given point (<var title="">x</var>, <var title="">y</var>), the width <var title="">w</var>, and the height <var title="">h</var> according to the <a href="#transformations" title="dom-context-2d-transformation">current transformation matrix</a>.</p></li>
|
|
<li><p>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.
|
|
<!--
|
|
The element used to determine the corresponding accessible object for purposes of supporting the accessibility API. This is for the purposes of driving screen magnification.
|
|
-->
|
|
|
|
</li>
|
|
|
|
<!--
|
|
<li><p>If your user agent supports a platform accessibility API the user agent must use the
|
|
(transformed) coordinate on the canvas and compute a caret or selection position (or rectangle) in screen coordinates and provide it to an assistive technology through the supported accessibility API implementation for that element. </li>
|
|
-->
|
|
|
|
<li><p>Return true.</li>
|
|
|
|
</ol></div>
|
|
<p>If the user resizes or moves the user agent window the user agent report must reflect the revised (<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>) position (or rectangle) in the accessibility API mapping. </p>
|
|
|
|
|
|
<div class="impl">
|
|
|
|
<p class="note">High blink rates may cause epileptic seizures in some users.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-blinkRate" title="dom-context-2d-blinkRate"><code>caretBlinkRate()</code></dfn>
|
|
|
|
method, when invoked, must run the following steps:</p>
|
|
|
|
<ol>
|
|
<li><p>If the operating system supports a caret blink rate setting the user agent must return a long value in milliseconds.</p></li>
|
|
<li><p>If the operating system does not support a caret blink rate setting the user agent must return a long value less than zero.</p></li>
|
|
</ol>
|
|
<p>
|
|
|
|
When the caret blink rate value returned:
|
|
</p>
|
|
<ul>
|
|
|
|
<li><p>For blink rates greater than zero the author, when drawing a blinking caret, must reflect the blink rate returned by this method.</p></li>
|
|
<li><p>For a blink rate less than zero the author, when drawing a blinking caret, must determine the blink rate.</p></li>
|
|
<li><p>For a blink rate of zero the author should visibly render the caret.</p></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<p class="XXX annotation"><b>Status: </b><i>This example should be updated to remove compatibility code for non-compliant implementations: </i></p>
|
|
|
|
<div class="example">
|
|
|
|
<p>This <code>canvas</code> element has a couple of checkboxes:</p>
|
|
|
|
<pre>
|
|
<canvas tabindex="-1" id="example" height="400" width="750" role="application">
|
|
<!-- Canvas Subtree acts as Shadow DOM that the browser maps to the platform accessibility API -->
|
|
|
|
<label id="labelA" for="showA"><input id="showA" role="checkbox" aria-labelledby="labelA" type="checkbox" /> Show "A"</label>
|
|
<label id="labelB" for="showB"><input id="showB" role="checkbox" aria-labelledby="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 programming
|
|
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 drawFocusManually = false;
|
|
if (document.activeElement == element || document.activeElementFocus == element && document.activeElement == context.canvas) {
|
|
try {
|
|
drawFocusManually = !context.drawFocusRing(element);
|
|
} catch(e) {
|
|
drawFocusManually = true;
|
|
}
|
|
}
|
|
if(drawFocusManually) {
|
|
context.beginPath();
|
|
context.rect(x-7, y-7, 12 + metrics.width+2, 14);
|
|
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');
|
|
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, false);
|
|
redraw();
|
|
</script></pre>
|
|
|
|
</div>
|
|
<p>
|
|
The <dfn id="caretpos">caret position</dfn> is the rectangular left edge of the caret position within an element having focus. The <dfn id="selectionpos">selection position</dfn> 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.
|
|
</p>
|
|
|
|
<h2 id="text"><span class="secno">12 </span>Text</h2><!-- a v3 feature --><dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current font settings.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>Relative keywords and lengths are computed relative to the font
|
|
of the <code>canvas</code> element.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current text alignment settings.</p>
|
|
|
|
<p>Can be set, to change the alignment. The possible values are
|
|
<code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, and <code title="">center</code>. Other values are ignored. The default is
|
|
<code title="">start</code>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the current baseline alignment settings.</p>
|
|
|
|
<p>Can be set, to change the baseline alignment. The possible
|
|
values and their meanings are given below. Other values are
|
|
ignored. The default is <code title="">alphabetic</code>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-fillText"><a href="#dom-context-2d-filltext">fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-strokeText"><a href="#dom-context-2d-stroketext">strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
|
|
|
|
<dd>
|
|
|
|
<p>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.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">metrics</var> = <var title="">context</var> . <code title="dom-context-2d-measureText"><a href="#dom-context-2d-measuretext">measureText</a></code>(<var title="">text</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns a <code><a href="#textmetrics">TextMetrics</a></code> object with the metrics of the given text in the current font.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">metrics</var> . <code title="dom-textmetrics-width"><a href="#dom-textmetrics-width">width</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the advance width of the text that was passed to the
|
|
<code title="dom-context-2d-measureText"><a href="#dom-context-2d-measuretext">measureText()</a></code>
|
|
method.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-font" title="dom-context-2d-font"><code>font</code></dfn> 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. <a href="#refsCSS">[CSS]</a></p>
|
|
|
|
<p>Font names must be interpreted in the context of the
|
|
<code>canvas</code> element's stylesheets; any fonts embedded using
|
|
<code title="">@font-face</code> 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.) <a href="#refsCSSFONTS">[CSSFONTS]</a></p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>On getting, the <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code>
|
|
attribute must return the <span title="serializing a CSS
|
|
value">serialized form</span> of the current font of the context
|
|
(with no 'line-height' component). <a href="#refsCSSOM">[CSSOM]</a></p>
|
|
|
|
<div class="example">
|
|
|
|
<p>For example, after the following statement:</p>
|
|
|
|
<pre>context.font = 'italic 400 12px/2 Unknown Font, sans-serif';</pre>
|
|
|
|
<p>...the expression <code title="">context.font</code> would
|
|
evaluate to the string "<code title="">italic 12px "Unknown Font", sans-serif</code>". 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.</p>
|
|
|
|
</div>
|
|
|
|
<p>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 <code>canvas</code>
|
|
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
|
|
<code>canvas</code> element at the time that the attribute is
|
|
set. If the computed values are undefined for a particular case
|
|
(e.g. because the <code>canvas</code> element is not <span>in a
|
|
<code>Document</code></span>), then the relative keywords must be
|
|
interpreted relative to the normal-weight 10px sans-serif
|
|
default.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-textalign" title="dom-context-2d-textAlign"><code>textAlign</code></dfn> IDL
|
|
attribute, on getting, must return the current value. On setting, if
|
|
the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
|
|
value must be changed to the new value. Otherwise, the new value
|
|
must be ignored. When the context is created, the <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> attribute must
|
|
initially have the value <code title="">start</code>.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-textbaseline" title="dom-context-2d-textBaseline"><code>textBaseline</code></dfn>
|
|
IDL attribute, on getting, must return the current value. On
|
|
setting, if the value is one of <code title="dom-context-2d-textBaseline-top"><a href="#dom-context-2d-textbaseline-top">top</a></code>, <code title="dom-context-2d-textBaseline-hanging"><a href="#dom-context-2d-textbaseline-hanging">hanging</a></code>, <code title="dom-context-2d-textBaseline-middle"><a href="#dom-context-2d-textbaseline-middle">middle</a></code>, <code title="dom-context-2d-textBaseline-alphabetic"><a href="#dom-context-2d-textbaseline-alphabetic">alphabetic</a></code>,
|
|
<code title="dom-context-2d-textBaseline-ideographic"><a href="#dom-context-2d-textbaseline-ideographic">ideographic</a></code>,
|
|
or <code title="dom-context-2d-textBaseline-bottom"><a href="#dom-context-2d-textbaseline-bottom">bottom</a></code>,
|
|
then the value must be changed to the new value. Otherwise, the new
|
|
value must be ignored. When the context is created, the <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> attribute
|
|
must initially have the value <code title="">alphabetic</code>.</p>
|
|
|
|
</div><p>The <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code>
|
|
attribute's allowed keywords correspond to alignment points in the
|
|
font:<p><img alt="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." height="300" src="http://www.w3.org/TR/html5/images/baselines.png" width="738"><p>The keywords map to these alignment points as follows:<dl><dt><dfn id="dom-context-2d-textbaseline-top" title="dom-context-2d-textBaseline-top"><code>top</code></dfn>
|
|
<dd>The top of the em square</dd>
|
|
|
|
<dt><dfn id="dom-context-2d-textbaseline-hanging" title="dom-context-2d-textBaseline-hanging"><code>hanging</code></dfn>
|
|
<dd>The hanging baseline</dd>
|
|
|
|
<dt><dfn id="dom-context-2d-textbaseline-middle" title="dom-context-2d-textBaseline-middle"><code>middle</code></dfn>
|
|
<dd>The middle of the em square</dd>
|
|
|
|
<dt><dfn id="dom-context-2d-textbaseline-alphabetic" title="dom-context-2d-textBaseline-alphabetic"><code>alphabetic</code></dfn>
|
|
<dd>The alphabetic baseline</dd>
|
|
|
|
<dt><dfn id="dom-context-2d-textbaseline-ideographic" title="dom-context-2d-textBaseline-ideographic"><code>ideographic</code></dfn>
|
|
<dd>The ideographic baseline</dd>
|
|
|
|
<dt><dfn id="dom-context-2d-textbaseline-bottom" title="dom-context-2d-textBaseline-bottom"><code>bottom</code></dfn>
|
|
<dd>The bottom of the em square</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-filltext" title="dom-context-2d-fillText"><code>fillText()</code></dfn> and
|
|
<dfn id="dom-context-2d-stroketext" title="dom-context-2d-strokeText"><code>strokeText()</code></dfn>
|
|
methods take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at the given (<var title="">x</var>, <var title="">y</var>) coordinates ensuring that the text isn't wider
|
|
than <var title="">maxWidth</var> if specified, using the current
|
|
<code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code>, <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code>, and <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code>
|
|
values. Specifically, when the methods are called, the user agent
|
|
must run the following steps:</p>
|
|
|
|
<ol><li><p>If <var title="">maxWidth</var> is present but less than or
|
|
equal to zero, return without doing anything; abort these
|
|
steps.</li>
|
|
|
|
<li><p>Let <var title="">font</var> be the current font of the
|
|
context, as given by the <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code> attribute.</li>
|
|
|
|
<li><p>Replace all the <span title="space character">space
|
|
characters</span> in <var title="">text</var> with U+0020 SPACE
|
|
characters.</li>
|
|
|
|
<li><p>Form a hypothetical infinitely wide CSS line box containing
|
|
a single inline box containing the text <var title="">text</var>,
|
|
with all the properties at their initial values except the 'font'
|
|
property of the inline box set to <var title="">font</var> and the
|
|
'direction' property of the inline box set to <span>the
|
|
directionality</span> of the <code>canvas</code> element. <a href="#refsCSS">[CSS]</a></li>
|
|
|
|
|
|
<li><p>If the <var title="">maxWidth</var> argument was specified
|
|
and the hypothetical width of the inline box in the hypothetical
|
|
line box is greater than <var title="">maxWidth</var> CSS pixels,
|
|
then change <var title="">font</var> 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.</li>
|
|
|
|
<li>
|
|
|
|
<p>Let the <var title="">anchor point</var> be a point on the
|
|
inline box, determined by the <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> and <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> values, as
|
|
follows:</p>
|
|
|
|
<p>Horizontal position:</p>
|
|
|
|
<dl><dt> If <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> is <code title="">left</code></dt>
|
|
<dt> If <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> is <code title="">start</code> and <span>the directionality</span> of the
|
|
<code>canvas</code> element is 'ltr'</dt>
|
|
<dt> If <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> is <code title="">end</code> and <span>the directionality</span> of the
|
|
<code>canvas</code> element is 'rtl'</dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s horizontal
|
|
position be the left edge of the inline box.</dd>
|
|
|
|
|
|
<dt> If <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> is <code title="">right</code></dt>
|
|
<dt> If <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> is <code title="">end</code> and <span>the directionality</span> of the
|
|
<code>canvas</code> element is 'ltr'</dt>
|
|
<dt> If <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> is <code title="">start</code> and <span>the directionality</span> of the
|
|
<code>canvas</code> element is 'rtl'</dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s horizontal
|
|
position be the right edge of the inline box.</dd>
|
|
|
|
|
|
<dt> If <code title="dom-context-2d-textAlign"><a href="#dom-context-2d-textalign">textAlign</a></code> is <code title="">center</code></dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s horizontal
|
|
position be half way between the left and right edges of the
|
|
inline box.</dd>
|
|
|
|
</dl><p>Vertical position:</p>
|
|
|
|
<dl><dt> If <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-top"><a href="#dom-context-2d-textbaseline-top">top</a></code></dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s vertical position
|
|
be the top of the em box of the first available font of the
|
|
inline box.</dd>
|
|
|
|
|
|
<dt> If <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-hanging"><a href="#dom-context-2d-textbaseline-hanging">hanging</a></code></dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s vertical position
|
|
be the hanging baseline of the first available font of the inline
|
|
box.</dd>
|
|
|
|
|
|
<dt> If <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-middle"><a href="#dom-context-2d-textbaseline-middle">middle</a></code></dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'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.</dd>
|
|
|
|
|
|
<dt> If <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-alphabetic"><a href="#dom-context-2d-textbaseline-alphabetic">alphabetic</a></code></dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s vertical position
|
|
be the alphabetic baseline of the first available font of the inline
|
|
box.</dd>
|
|
|
|
|
|
<dt> If <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-ideographic"><a href="#dom-context-2d-textbaseline-ideographic">ideographic</a></code></dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s vertical position
|
|
be the ideographic baseline of the first available font of the inline
|
|
box.</dd>
|
|
|
|
|
|
<dt> If <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code> is <code title="dom-context-2d-textBaseline-bottom"><a href="#dom-context-2d-textbaseline-bottom">bottom</a></code></dt>
|
|
|
|
<dd>Let the <var title="">anchor point</var>'s vertical position
|
|
be the bottom of the em box of the first available font of the
|
|
inline box.</dd>
|
|
|
|
</dl></li>
|
|
|
|
<li>
|
|
|
|
<p>Paint the hypothetical inline box as the shape given by the
|
|
text's glyphs, as transformed by the <a href="#transformations" title="dom-context-2d-transformation">current transformation
|
|
matrix</a>, and anchored and sized so that before applying the
|
|
<a href="#transformations" title="dom-context-2d-transformation">current transformation
|
|
matrix</a>, the <var title="">anchor point</var> is at (<var title="">x</var>, <var title="">y</var>) and each CSS pixel is
|
|
mapped to one coordinate space unit.</p>
|
|
|
|
<p>For <code title="dom-context-2d-fillText"><a href="#dom-context-2d-filltext">fillText()</a></code>
|
|
<code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code> must be
|
|
applied to the glyphs and <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code> must be
|
|
ignored. For <code title="dom-context-2d-strokeText"><a href="#dom-context-2d-stroketext">strokeText()</a></code> the reverse
|
|
holds and <code title="dom-context-2d-strokeStyle"><a href="#dom-context-2d-strokestyle">strokeStyle</a></code> must be
|
|
applied to the glyph outlines and <code title="dom-context-2d-fillStyle"><a href="#dom-context-2d-fillstyle">fillStyle</a></code> must be
|
|
ignored.</p>
|
|
|
|
<p>Text is painted without affecting the current path, and is
|
|
subject to <a href="#shadows" title="shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the <a href="#clipping-region" title="clipping region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
|
|
operators</a>.</p>
|
|
|
|
</li>
|
|
|
|
</ol><p>The <dfn id="dom-context-2d-measuretext" title="dom-context-2d-measureText"><code>measureText()</code></dfn>
|
|
method takes one argument, <var title="">text</var>. When the method
|
|
is invoked, the user agent must replace all the <span title="space
|
|
character">space characters</span> in <var title="">text</var> with
|
|
U+0020 SPACE characters, and then must form a hypothetical
|
|
infinitely wide CSS line box containing a single inline box
|
|
containing the text <var title="">text</var>, 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 <code title="dom-context-2d-font"><a href="#dom-context-2d-font">font</a></code> attribute, and
|
|
must then return a new <code><a href="#textmetrics">TextMetrics</a></code> object with its
|
|
<code title="dom-textmetrics-width"><a href="#dom-textmetrics-width">width</a></code> attribute set to
|
|
the width of that inline box, in CSS pixels. <a href="#refsCSS">[CSS]</a></p>
|
|
|
|
<p>The <code><a href="#textmetrics">TextMetrics</a></code> interface is used for the objects
|
|
returned from <code title="dom-context-2d-measureText"><a href="#dom-context-2d-measuretext">measureText()</a></code>. It has one
|
|
attribute, <dfn id="dom-textmetrics-width" title="dom-textmetrics-width"><code>width</code></dfn>, which is set
|
|
by the <code title="dom-context-2d-measureText"><a href="#dom-context-2d-measuretext">measureText()</a></code>
|
|
method.</p>
|
|
|
|
<p class="note">Glyphs rendered using <code title="dom-context-2d-fillText"><a href="#dom-context-2d-filltext">fillText()</a></code> and <code title="dom-context-2d-strokeText"><a href="#dom-context-2d-stroketext">strokeText()</a></code> can spill out
|
|
of the box given by the font size (the em square size) and the width
|
|
returned by <code title="dom-context-2d-measureText"><a href="#dom-context-2d-measuretext">measureText()</a></code> (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.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div><p class="note">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.<h2 id="images"><span class="secno">13 </span>Images</h2><p>To draw images onto the canvas, the <dfn id="dom-context-2d-drawimage" title="dom-context-2d-drawImage"><code>drawImage</code></dfn> method
|
|
can be used.<p>This method can be invoked with three different sets of arguments:<ul class="brief"><li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</code>
|
|
<li><code title="">drawImage(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
|
|
<li><code title="">drawImage(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</code>
|
|
</ul><p>Each of those three can take either an
|
|
<code>HTMLImageElement</code>, an <code>HTMLCanvasElement</code>, or
|
|
an <code>HTMLVideoElement</code> for the <var title="">image</var>
|
|
argument.<dl class="domintro"><dt><var title="">context</var> . <code title="dom-context-2d-drawImage"><a href="#dom-context-2d-drawimage">drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>)</dt>
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-drawImage"><a href="#dom-context-2d-drawimage">drawImage</a></code>(<var title="">image</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-drawImage"><a href="#dom-context-2d-drawimage">drawImage</a></code>(<var title="">image</var>, <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dw</var>, <var title="">dh</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Draws the given image onto the canvas. The arguments are
|
|
interpreted as follows:</p>
|
|
|
|
<p><img alt="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." height="356" src="drawImage.png" width="356"></p>
|
|
|
|
<p>If the first argument isn't an <code>img</code>,
|
|
<code>canvas</code>, or <code>video</code> element, throws a
|
|
<code>TYPE_MISMATCH_ERR</code> exception. If the image has no
|
|
image data, throws an <code>INVALID_STATE_ERR</code> exception. If
|
|
the one of the source rectangle dimensions is zero, throws an
|
|
<code>INDEX_SIZE_ERR</code> exception. If the image isn't yet
|
|
fully decoded, then nothing is drawn.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>If not specified, the <var title="">dw</var> and <var title="">dh</var> arguments must default to the values of <var title="">sw</var> and <var title="">sh</var>, interpreted such that
|
|
one CSS pixel in the image is treated as one unit in the canvas
|
|
coordinate space. If the <var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, and <var title="">sh</var> 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 <i>concrete object size</i> must be used
|
|
instead, as determined using the CSS "<a href="http://dev.w3.org/csswg/css3-images/#default-sizing">Concrete
|
|
Object Size Resolution</a>" algorithm, with the <i>specified
|
|
size</i> having neither a definite width nor height, nor any
|
|
additional contraints, the object's intrinsic properties being those
|
|
of the <var title="">image</var> argument, and the <i>default object
|
|
size</i> being the size of the <code>canvas</code> element. <a href="#refsCSSIMAGES">[CSSIMAGES]</a></p>
|
|
|
|
<p>The <var title="">image</var> argument is an instance of either
|
|
<code>HTMLImageElement</code>, <code>HTMLCanvasElement</code>, or
|
|
<code>HTMLVideoElement</code>. If the <var title="">image</var> is
|
|
null, the implementation must raise a <code>TYPE_MISMATCH_ERR</code>
|
|
exception.</p>
|
|
|
|
<p>If the <var title="">image</var> argument is an
|
|
<code>HTMLImageElement</code> object that is not <span title="img-good">fully decodable</span>, or if the <var title="">image</var> argument is an <code>HTMLVideoElement</code>
|
|
object whose <code title="dom-media-readyState">readyState</code>
|
|
attribute is either <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
|
|
implementation must return without drawing anything.</p>
|
|
<p>If the <var title="">image</var> argument is an
|
|
<code>HTMLCanvasElement</code> object with either a horizontal
|
|
dimension or a vertical dimension equal to zero, then the
|
|
implementation must raise an <code>INVALID_STATE_ERR</code>
|
|
exception.</p>
|
|
|
|
|
|
<p>The source rectangle is the rectangle whose corners are the four
|
|
points (<var title="">sx</var>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>).</p>
|
|
|
|
<p>If one of the <var title="">sw</var> or <var title="">sh</var>
|
|
arguments is zero, the implementation must raise an
|
|
<code>INDEX_SIZE_ERR</code> exception.</p>
|
|
|
|
<p>The destination rectangle is the rectangle whose corners are the
|
|
four points (<var title="">dx</var>, <var title="">dy</var>),
|
|
(<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <var title="">dy</var>), (<span title=""><var title="">dx</var>+<var title="">dw</var></span>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>), (<var title="">dx</var>, <span title=""><var title="">dy</var>+<var title="">dh</var></span>).</p>
|
|
|
|
<p>When <code title="dom-context-2d-drawImage"><a href="#dom-context-2d-drawimage">drawImage()</a></code> 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 <a href="#transformations" title="dom-context-2d-transformation">current transformation
|
|
matrix</a> to the points of the destination rectangle.</p>
|
|
|
|
<p>The original image data of the source image must be used, not the
|
|
image as it is rendered (e.g. <code title="attr-dim-width">width</code> and <code title="attr-dim-height">height</code> 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. </p>
|
|
|
|
<p class="note">This specification does not define the algorithm to
|
|
use when scaling the image, if necessary.</p>
|
|
|
|
<p class="note">When a canvas is drawn onto itself, the <a href="#drawing-model">drawing
|
|
model</a> 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.</p>
|
|
|
|
<p>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.)</p>
|
|
|
|
|
|
<p>When the <code title="dom-context-2d-drawImage"><a href="#dom-context-2d-drawimage">drawImage()</a></code> method
|
|
is passed an animated image as its <var title="">image</var>
|
|
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.</p>
|
|
|
|
|
|
<p>When the <var title="">image</var> argument is an
|
|
<code>HTMLVideoElement</code>, then the frame at the <span>current
|
|
playback position</span> must be used as the source image, and the
|
|
source image's dimensions must be the <span title="concept-video-intrinsic-width">intrinsic width</span> and
|
|
<span title="concept-video-intrinsic-height">intrinsic height</span>
|
|
of the <span>media resource</span> (i.e. after any aspect-ratio
|
|
correction has been applied).</p>
|
|
|
|
|
|
<p>Images are painted without affecting the current path, and are
|
|
subject to <a href="#shadows" title="shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the <a href="#clipping-region" title="clipping region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
|
|
operators</a>.</p>
|
|
|
|
</div><h2 id="pixel-manipulation"><span class="secno">14 </span><dfn>Pixel manipulation</dfn></h2><dl class="domintro"><dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-createImageData"><a href="#dom-context-2d-createimagedata">createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns an <code><a href="#imagedata">ImageData</a></code> 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.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-createImageData"><a href="#dom-context-2d-createimagedata">createImageData</a></code>(<var title="">imagedata</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns an <code><a href="#imagedata">ImageData</a></code> object with the same
|
|
dimensions as the argument. All the pixels in the returned object
|
|
are transparent black.</p>
|
|
|
|
<p>Throws a <code>NOT_SUPPORTED_ERR</code> exception if the
|
|
argument is null.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">getImageData</a></code>(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>, <var title="">sh</var>)</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns an <code><a href="#imagedata">ImageData</a></code> object containing the image
|
|
data for the given rectangle of the canvas.</p>
|
|
|
|
<p>Throws a <code>NOT_SUPPORTED_ERR</code> exception if any of the
|
|
arguments are not finite. Throws an <code>INDEX_SIZE_ERR</code>
|
|
exception if the either of the width or height arguments are
|
|
zero.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">imagedata</var> . <code title="dom-imagedata-width"><a href="#dom-imagedata-width">width</a></code></dt>
|
|
<dt><var title="">imagedata</var> . <code title="dom-imagedata-height"><a href="#dom-imagedata-height">height</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the actual dimensions of the data in the <code><a href="#imagedata">ImageData</a></code> object, in device pixels.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">imagedata</var> . <code title="dom-imagedata-data"><a href="#dom-imagedata-data">data</a></code></dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><var title="">context</var> . <code title="dom-context-2d-putImageData"><a href="#dom-context-2d-putimagedata">putImageData</a></code>(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var> [, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var> ])</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Paints the data from the given <code><a href="#imagedata">ImageData</a></code> object
|
|
onto the canvas. If a dirty rectangle is provided, only the pixels
|
|
from that rectangle are painted.</p>
|
|
|
|
<p>The <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>
|
|
and <code title="dom-context-2d-globalCompositeOperation"><a href="#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code>
|
|
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.</p>
|
|
|
|
<p>If the first argument is null, throws a
|
|
<code>TYPE_MISMATCH_ERR</code> exception. Throws a
|
|
<code>NOT_SUPPORTED_ERR</code> exception if any of the other
|
|
arguments are not finite.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The <dfn id="dom-context-2d-createimagedata" title="dom-context-2d-createImageData"><code>createImageData()</code></dfn>
|
|
method is used to instantiate new blank <code><a href="#imagedata">ImageData</a></code>
|
|
objects. When the method is invoked with two arguments <var title="">sw</var> and <var title="">sh</var>, it must return an
|
|
<code><a href="#imagedata">ImageData</a></code> object representing a rectangle with a width
|
|
in CSS pixels equal to the absolute magnitude of <var title="">sw</var> and a height in CSS pixels equal to the absolute
|
|
magnitude of <var title="">sh</var>. When invoked with a single <var title="">imagedata</var> argument, it must return an
|
|
<code><a href="#imagedata">ImageData</a></code> object representing a rectangle with the same
|
|
dimensions as the <code><a href="#imagedata">ImageData</a></code> object passed as the
|
|
argument. The <code><a href="#imagedata">ImageData</a></code> object returned must be filled
|
|
with transparent black.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-getimagedata" title="dom-context-2d-getImageData"><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
|
|
<var title="">sh</var>)</code></dfn> method must return an
|
|
<code><a href="#imagedata">ImageData</a></code> object representing the underlying pixel data
|
|
for the area of the canvas denoted by the rectangle whose corners are
|
|
the four points (<var title="">sx</var>, <var title="">sy</var>),
|
|
(<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in canvas
|
|
coordinate space units. Pixels outside the canvas must be returned
|
|
as transparent black. Pixels must be returned as non-premultiplied
|
|
alpha values.</p>
|
|
|
|
<p>If any of the arguments to <code title="dom-context-2d-createImageData"><a href="#dom-context-2d-createimagedata">createImageData()</a></code> or
|
|
<code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">getImageData()</a></code> are
|
|
infinite or NaN, or if the <code title="dom-context-2d-createImageData"><a href="#dom-context-2d-createimagedata">createImageData()</a></code>
|
|
method is invoked with only one argument but that argument is null,
|
|
the method must instead raise a <code>NOT_SUPPORTED_ERR</code>
|
|
exception. If either the <var title="">sw</var> or <var title="">sh</var> arguments are zero, the method must instead raise
|
|
an <code>INDEX_SIZE_ERR</code> exception.</p>
|
|
|
|
<p><code><a href="#imagedata">ImageData</a></code> objects must be initialized so that their
|
|
<dfn id="dom-imagedata-width" title="dom-imagedata-width"><code>width</code></dfn> attribute
|
|
is set to <var title="">w</var>, the number of physical device
|
|
pixels per row in the image data, their <dfn id="dom-imagedata-height" title="dom-imagedata-height"><code>height</code></dfn> attribute is
|
|
set to <var title="">h</var>, the number of rows in the image data,
|
|
and their <dfn id="dom-imagedata-data" title="dom-imagedata-data"><code>data</code></dfn>
|
|
attribute is initialized to a <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> object
|
|
holding the image data. At least one pixel's worth of image data
|
|
must be returned.</p>
|
|
|
|
<p>The <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> 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.</p>
|
|
|
|
<p>The <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> object thus represents <var title="">h</var>×<var title="">w</var>×4 integers. The
|
|
<dfn id="dom-canvaspixelarray-length" title="dom-canvaspixelarray-length"><code>length</code></dfn>
|
|
attribute of a <code><a href="#canvaspixelarray">CanvasPixelArray</a></code> object must return this
|
|
number.</p>
|
|
|
|
<p>The object's <span>supported property indices</span> are the
|
|
numbers in the range 0 .. <span title=""><var title="">h</var>×<var title="">w</var>×4-1</span>.</p>
|
|
|
|
<p>To <dfn id="dom-canvaspixelarray-get" title="dom-CanvasPixelArray-get">determine the value of
|
|
an indexed property</dfn> <var title="">index</var>, the user agent
|
|
must return the value of the <var title="">index</var>th component
|
|
in the array.</p>
|
|
|
|
<p>To <dfn id="dom-canvaspixelarray-set" title="dom-CanvasPixelArray-set">set the value of an
|
|
existing indexed property</dfn> <var title="">index</var> to value
|
|
<var title="">value</var>, the value of the <var title="">index</var>th component in the array must be set to <var title="">value</var>.</p>
|
|
|
|
<p class="note">The width and height (<var title="">w</var> and <var title="">h</var>) might be different from the <var title="">sw</var>
|
|
and <var title="">sh</var> arguments to the above methods, e.g. if
|
|
the canvas is backed by a high-resolution bitmap, or if the <var title="">sw</var> and <var title="">sh</var> arguments are
|
|
negative.</p>
|
|
|
|
<p>The <dfn id="dom-context-2d-putimagedata" title="dom-context-2d-putImageData"><code>putImageData(<var title="">imagedata</var>, <var title="">dx</var>, <var title="">dy</var>, <var title="">dirtyX</var>, <var title="">dirtyY</var>, <var title="">dirtyWidth</var>, <var title="">dirtyHeight</var>)</code></dfn> method writes data from
|
|
<code><a href="#imagedata">ImageData</a></code> structures back to the canvas.</p>
|
|
|
|
<p>If any of the arguments to the method are infinite or NaN, the
|
|
method must raise a <code>NOT_SUPPORTED_ERR</code> exception.</p>
|
|
|
|
<p>If the first argument to the method is null, then the <code title="dom-context-2d-putImageData"><a href="#dom-context-2d-putimagedata">putImageData()</a></code> method
|
|
must raise a <code>TYPE_MISMATCH_ERR</code> exception.</p>
|
|
|
|
<p>When the last four arguments are omitted, they must be assumed to
|
|
have the values 0, 0, the <code title="dom-imagedata-width"><a href="#dom-imagedata-width">width</a></code> member of the <var title="">imagedata</var> structure, and the <code title="dom-imagedata-height"><a href="#dom-imagedata-height">height</a></code> member of the <var title="">imagedata</var> structure, respectively.</p>
|
|
|
|
<p>When invoked with arguments that do not, per the last few
|
|
paragraphs, cause an exception to be raised, the <code title="dom-context-2d-putImageData"><a href="#dom-context-2d-putimagedata">putImageData()</a></code> method
|
|
must act as follows:</p>
|
|
|
|
<ol><li>
|
|
|
|
<p>Let <var title="">dx<sub>device</sub></var> be the x-coordinate
|
|
of the device pixel in the underlying pixel data of the canvas
|
|
corresponding to the <var title="">dx</var> coordinate in the
|
|
canvas coordinate space.</p>
|
|
|
|
<p>Let <var title="">dy<sub>device</sub></var> be the y-coordinate
|
|
of the device pixel in the underlying pixel data of the canvas
|
|
corresponding to the <var title="">dy</var> coordinate in the
|
|
canvas coordinate space.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">dirtyWidth</var> is negative, let <var title="">dirtyX</var> be <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span>, and let <var title="">dirtyWidth</var> be equal to the absolute magnitude of
|
|
<var title="">dirtyWidth</var>.</p>
|
|
|
|
<p>If <var title="">dirtyHeight</var> is negative, let <var title="">dirtyY</var> be <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span>, and let <var title="">dirtyHeight</var> be equal to the absolute magnitude of
|
|
<var title="">dirtyHeight</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If <var title="">dirtyX</var> is negative, let <var title="">dirtyWidth</var> be <span title=""><var title="">dirtyWidth</var>+<var title="">dirtyX</var></span>, and
|
|
let <var title="">dirtyX</var> be zero.</p>
|
|
|
|
<p>If <var title="">dirtyY</var> is negative, let <var title="">dirtyHeight</var> be <span title=""><var title="">dirtyHeight</var>+<var title="">dirtyY</var></span>, and
|
|
let <var title="">dirtyY</var> be zero.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span> is greater than the <code title="dom-imagedata-width"><a href="#dom-imagedata-width">width</a></code> attribute of the <var title="">imagedata</var> argument, let <var title="">dirtyWidth</var> be the value of that <code title="dom-imagedata-width"><a href="#dom-imagedata-width">width</a></code> attribute, minus the
|
|
value of <var title="">dirtyX</var>.</p>
|
|
|
|
<p>If <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span> is greater than the <code title="dom-imagedata-height"><a href="#dom-imagedata-height">height</a></code> attribute of the <var title="">imagedata</var> argument, let <var title="">dirtyHeight</var> be the value of that <code title="dom-imagedata-height"><a href="#dom-imagedata-height">height</a></code> attribute, minus the
|
|
value of <var title="">dirtyY</var>.</p>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>If, after those changes, either <var title="">dirtyWidth</var>
|
|
or <var title="">dirtyHeight</var> is negative or zero, stop these
|
|
steps without affecting the canvas.</p>
|
|
|
|
</li>
|
|
|
|
<li><p>Otherwise, for all integer values of <var title="">x</var>
|
|
and <var title="">y</var> where <span title=""><var title="">dirtyX</var> ≤ <var title="">x</var> < <span title=""><var title="">dirtyX</var>+<var title="">dirtyWidth</var></span></span>
|
|
and <span title=""><var title="">dirtyY</var> ≤ <var title="">y</var> < <span title=""><var title="">dirtyY</var>+<var title="">dirtyHeight</var></span></span>, copy the four channels of
|
|
the pixel with coordinate (<var title="">x</var>, <var title="">y</var>) in the <var title="">imagedata</var> data
|
|
structure to the pixel with coordinate (<span title=""><var title="">dx<sub>device</sub></var>+<var title="">x</var></span>,
|
|
<span title=""><var title="">dy<sub>device</sub></var>+<var title="">y</var></span>) in the underlying pixel data of the
|
|
canvas.</li>
|
|
|
|
</ol><p>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:</p>
|
|
|
|
<pre>context.putImageData(context.getImageData(x, y, w, h), p, q);</pre>
|
|
|
|
<p>...for any value of <var title="">x</var>, <var title="">y</var>,
|
|
<var title="">w</var>, and <var title="">h</var> and where <var title="">p</var> is the smaller of <var title="">x</var> and the sum
|
|
of <var title="">x</var> and <var title="">w</var>, and <var title="">q</var> is the smaller of <var title="">y</var> and the sum
|
|
of <var title="">y</var> and <var title="">h</var>; and except that
|
|
the following two calls:</p>
|
|
|
|
<pre>context.createImageData(w, h);
|
|
context.getImageData(0, 0, w, h);</pre>
|
|
|
|
<p>...must return <code><a href="#imagedata">ImageData</a></code> objects with the same
|
|
dimensions, for any value of <var title="">w</var> and <var title="">h</var>. 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 <code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">createImageData()</a></code>, <code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">getImageData()</a></code> and <code title="dom-context-2d-putImageData"><a href="#dom-context-2d-putimagedata">putImageData()</a></code>
|
|
operations.</p>
|
|
|
|
<p class="note">Due to the lossy nature of converting to and from
|
|
premultiplied alpha color values, pixels that have just been set
|
|
using <code title="dom-context-2d-putImageData"><a href="#dom-context-2d-putimagedata">putImageData()</a></code> might be
|
|
returned to an equivalent <code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">getImageData()</a></code> as
|
|
different values.</p>
|
|
|
|
<p>The current path, <a href="#transformations" title="dom-context-2d-transformation">transformation matrix</a>,
|
|
<a href="#shadows" title="shadows">shadow attributes</a>, <a href="#dom-context-2d-globalalpha" title="dom-context-2d-globalAlpha">global alpha</a>, the <a href="#clipping-region" title="clipping region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation" title="dom-context-2d-globalCompositeOperation">global composition
|
|
operator</a> must not affect the <code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">getImageData()</a></code> and <code title="dom-context-2d-putImageData"><a href="#dom-context-2d-putimagedata">putImageData()</a></code>
|
|
methods.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The data returned by <code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">getImageData()</a></code> 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.</p>
|
|
|
|
<p>In the following example, the script generates an
|
|
<code><a href="#imagedata">ImageData</a></code> object so that it can draw onto it.</p>
|
|
|
|
<pre>// 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) { ... }</pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>Here is an example of using <code title="dom-context-2d-getImageData"><a href="#dom-context-2d-getimagedata">getImageData()</a></code> and <code title="dom-context-2d-putImageData"><a href="#dom-context-2d-putimagedata">putImageData()</a></code> to
|
|
implement an edge detection filter.</p>
|
|
|
|
<pre><!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></pre>
|
|
|
|
</div><div class="impl">
|
|
|
|
<h2 id="drawing-model"><span class="secno">15 </span><dfn>Drawing model</dfn></h2>
|
|
|
|
<p>When a shape or image is painted, user agents must follow these
|
|
steps, in the order given (or act as if they do):</p>
|
|
|
|
<ol><li><p>Render the shape or image onto an infinite transparent black
|
|
bitmap, creating image <var title="">A</var>, 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.</li>
|
|
|
|
<li><p><a href="#when-shadows-are-drawn">When shadows are drawn</a>, render the shadow from
|
|
image <var title="">A</var>, using the current shadow styles,
|
|
creating image <var title="">B</var>.</li>
|
|
|
|
<li><p><a href="#when-shadows-are-drawn">When shadows are drawn</a>, multiply the alpha
|
|
component of every pixel in <var title="">B</var> by <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>.</li>
|
|
|
|
<li><p><a href="#when-shadows-are-drawn">When shadows are drawn</a>, composite <var title="">B</var> within the <a href="#clipping-region">clipping region</a> over the
|
|
current canvas bitmap using the current composition
|
|
operator.</li>
|
|
|
|
<li><p>Multiply the alpha component of every pixel in <var title="">A</var> by <code title="dom-context-2d-globalAlpha"><a href="#dom-context-2d-globalalpha">globalAlpha</a></code>.</li>
|
|
|
|
<li><p>Composite <var title="">A</var> within the <a href="#clipping-region">clipping
|
|
region</a> over the current canvas bitmap using the current
|
|
composition operator.</li>
|
|
|
|
</ol></div><h2 id="examples"><span class="secno">16 </span>Examples</h2><p><i>This section is non-normative.</i><div class="example">
|
|
|
|
<p>Here is an example of a script that uses canvas to draw <a href="data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUw%2BDQo8aHRtbCBsYW5nPSJlbiI%2BDQogPGhlYWQ%2BDQogIDx0aXRsZT5QcmV0dHkgR2xvd2luZyBMaW5lczwvdGl0bGU%2BDQogPC9oZWFkPg0KIDxib2R5Pg0KPGNhbnZhcyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQ1MCI%2BPC9jYW52YXM%2BDQo8c2NyaXB0Pg0KDQogdmFyIGNvbnRleHQgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnY2FudmFzJylbMF0uZ2V0Q29udGV4dCgnMmQnKTsNCg0KIHZhciBsYXN0WCA9IGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKTsNCiB2YXIgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KIHZhciBodWUgPSAwOw0KIGZ1bmN0aW9uIGxpbmUoKSB7DQogICBjb250ZXh0LnNhdmUoKTsNCiAgIGNvbnRleHQudHJhbnNsYXRlKGNvbnRleHQuY2FudmFzLndpZHRoLzIsIGNvbnRleHQuY2FudmFzLmhlaWdodC8yKTsNCiAgIGNvbnRleHQuc2NhbGUoMC45LCAwLjkpOw0KICAgY29udGV4dC50cmFuc2xhdGUoLWNvbnRleHQuY2FudmFzLndpZHRoLzIsIC1jb250ZXh0LmNhbnZhcy5oZWlnaHQvMik7DQogICBjb250ZXh0LmJlZ2luUGF0aCgpOw0KICAgY29udGV4dC5saW5lV2lkdGggPSA1ICsgTWF0aC5yYW5kb20oKSAqIDEwOw0KICAgY29udGV4dC5tb3ZlVG8obGFzdFgsIGxhc3RZKTsNCiAgIGxhc3RYID0gY29udGV4dC5jYW52YXMud2lkdGggKiBNYXRoLnJhbmRvbSgpOw0KICAgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KICAgY29udGV4dC5iZXppZXJDdXJ2ZVRvKGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGxhc3RYLCBsYXN0WSk7DQoNCiAgIGh1ZSA9IGh1ZSArIDEwICogTWF0aC5yYW5kb20oKTsNCiAgIGNvbnRleHQuc3Ryb2tlU3R5bGUgPSAnaHNsKCcgKyBodWUgKyAnLCA1MCUsIDUwJSknOw0KICAgY29udGV4dC5zaGFkb3dDb2xvciA9ICd3aGl0ZSc7DQogICBjb250ZXh0LnNoYWRvd0JsdXIgPSAxMDsNCiAgIGNvbnRleHQuc3Ryb2tlKCk7DQogICBjb250ZXh0LnJlc3RvcmUoKTsNCiB9DQogc2V0SW50ZXJ2YWwobGluZSwgNTApOw0KDQogZnVuY3Rpb24gYmxhbmsoKSB7DQogICBjb250ZXh0LmZpbGxTdHlsZSA9ICdyZ2JhKDAsMCwwLDAuMSknOw0KICAgY29udGV4dC5maWxsUmVjdCgwLCAwLCBjb250ZXh0LmNhbnZhcy53aWR0aCwgY29udGV4dC5jYW52YXMuaGVpZ2h0KTsNCiB9DQogc2V0SW50ZXJ2YWwoYmxhbmssIDQwKTsNCg0KPC9zY3JpcHQ%2BDQogPC9ib2R5Pg0KPC9odG1sPg0K">pretty glowing lines</a>.</p>
|
|
|
|
<pre><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></pre>
|
|
|
|
</div><h2 class="no-num" id="references">References</h2><p>All references are normative unless marked "Non-normative".</p>
|
|
|
|
<dl>
|
|
|
|
<dt id="refsARIA">[ARIA]</dt>
|
|
<dd><cite><a href="http://www.w3.org/WAI/PF/aria/">Accessible Rich
|
|
Internet Applications (WAI-ARIA)</a></cite>, J. Craig, M. Cooper, L. Pappas,
|
|
R. Schwerdtfeger, L. Seeman. W3C.</dd>
|
|
|
|
|
|
<dt id="refsBEZIER">[BEZIER]</dt>
|
|
<dd><cite>Courbes à poles</cite>, P. de Casteljau. INPI, 1959.</dd>
|
|
|
|
<dt id="refsCSS">[CSS]</dt>
|
|
<dd><cite><a href="http://www.w3.org/TR/CSS/">Cascading Style Sheets Level 2
|
|
Revision 1</a></cite>, B. Bos, T. Çelik, I.
|
|
Hickson, H. Lie. W3C.</dd>
|
|
|
|
<dt id="refsCSSCOLOR">[CSSCOLOR]</dt>
|
|
<dd><cite><a href="http://dev.w3.org/csswg/css3-color/">CSS Color
|
|
Module Level 3</a></cite>, T. Çelik, C. Lilley, L.
|
|
Baron. W3C.</dd>
|
|
|
|
<dt id="refsCSSFONTS">[CSSFONTS]</dt>
|
|
<dd><cite><a href="http://www.w3.org/TR/css3-fonts/">CSS Fonts
|
|
Module Level 3</a></cite>, J. Daggett. W3C.</dd>
|
|
|
|
<dt id="refsCSSIMAGES">[CSSIMAGES]</dt>
|
|
<dd><cite><a href="http://dev.w3.org/csswg/css3-images/">CSS Image
|
|
Values and Replaced Content Module Level 3</a></cite>, E. Etemad,
|
|
T. Atkins. W3C.</dd>
|
|
|
|
<dt id="refsCSSOM">[CSSOM]</dt>
|
|
<dd><cite><a href="http://dev.w3.org/csswg/cssom/">Cascading Style Sheets
|
|
Object Model (CSSOM)</a></cite>, A. van Kesteren. W3C.</dd>
|
|
|
|
<dt id="refsHTML5">[HTML5]</dt>
|
|
<dd>
|
|
<cite><a href="http://dev.w3.org/html5/spec/">HTML5</a></cite>,
|
|
I. Hickson. W3C.</dd>
|
|
|
|
<dt id="refsPORTERDUFF">[PORTERDUFF]</dt>
|
|
<dd><cite><a href="http://keithp.com/~keithp/porterduff/p253-porter.pdf">Compositing
|
|
Digital Images</a></cite>, T. Porter, T. Duff. In <cite>Computer
|
|
graphics</cite>, volume 18, number 3, pp. 253-259. ACM Press, July
|
|
1984.</dd>
|
|
|
|
<dt id="refsWEBIDL">[WEBIDL]</dt>
|
|
<dd><cite><a href="http://dev.w3.org/2006/webapi/WebIDL/">Web
|
|
IDL</a></cite>, C. McCormack. W3C.</dd>
|
|
|
|
</dl><h2 class="no-num" id="acknowledgements">Acknowledgements</h2><p>For a full list of acknowledgements, please see the HTML5
|
|
specification. <a href="#refsHTML5">[HTML5]</a>
|