<?xml version="1.0" encoding="UTF-8"?><html class="split" lang="en-US-x-hixie" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/><title>HTML Standard</title><meta content="#3c790a" name="theme-color"/><link href="https://resources.whatwg.org/standard.css" rel="stylesheet"/><link href="https://resources.whatwg.org/logo.svg" rel="icon"/><style>
   .status { min-height: 0.6em; font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; margin: -2em 0 0 0; border-collapse: initial; border-spacing: initial; }
   .status:hover { z-index: 9; }
   .status:focus-within { z-index: 9; }
   .status.wrapped &gt; :not(input) { display: none; }
   .status &gt; input { position: absolute; left: 0; top: 0; width: 1em; height: 1em; border: none; background: transparent; padding: 0; margin: 0; }
   .status &gt; p { font-size: 0.6em; margin: 0; padding: 0; }
   .status &gt; p + p { padding-top: 0.5em; }
   .status &gt; p &gt; strong { margin-left: 1.5em; }
   .status &gt; .support { display: block; }
   .status &gt; .support &gt; span { padding: 0.2em 0; display: block; display: table; }
   .status &gt; .support &gt; span.partial { color: #666666; filter: grayscale(50%); }
   .status &gt; .support &gt; span.no { color: #CCCCCC; filter: grayscale(100%); }
   .status &gt; .support &gt; span.no::before { opacity: 0.5; }
   .status &gt; .support &gt; span:first-of-type { padding-top: 0.5em; }
   .status &gt; .support &gt; span &gt; span { padding: 0 0.5em; display: table-cell; vertical-align: top; }
   .status &gt; .support &gt; span &gt; span:first-child { width: 100%; }
   .status &gt; .support &gt; span &gt; span:last-child { width: 100%; white-space: pre; padding: 0; }
   .status &gt; .support &gt; span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; }
   .status &gt; .support &gt; .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
   .status &gt; .support &gt; .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
   .status &gt; .support &gt; .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */
   .status &gt; .support &gt; .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); }
   .status &gt; .support &gt; .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */
   .status &gt; .support &gt; .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
   .status &gt; .support &gt; .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); }
   .status &gt; .support &gt; .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
   .status &gt; .support &gt; .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); }
   .status &gt; .support &gt; .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); }
   .status &gt; .support &gt; .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); }
   .status &gt; .support &gt; .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); }
   .status &gt; .support &gt; .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
   .status &gt; .support &gt; .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
   .status &gt; .support &gt; .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); }
   .status &gt; .support &gt; .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.png); }
   .status &gt; .caniuse { text-align: right; font-style: italic; width: 100%; }
   .status &gt; .caniuse + p { margin-top: 0.5em; border-top: 1px solid silver; }

   @media (max-width: 767px) {
     .status { right: -9em; }
   }
  </style><style>
   [hidden] { display: none; }

   .bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; }

   .fingerprint { position: absolute; right: 0; z-index: 5; }
   @media (max-width: 767px) {
     .fingerprint { max-width: 35px; }
   }

   .applies .yes, .yesno .yes { background: yellow; }
   .yesno .yes, .yesno .no { text-align: center; }

   .applies thead th &gt; * { display: block; }
   .applies thead code { display: block; }
   .applies td { text-align: center; }

   .matrix, .matrix td { border: hidden; text-align: right; }
   .matrix { margin-left: 2em; }

   .vertical-summary-table tr &gt; th[rowspan=&quot;2&quot;]:first-child + th,
   .vertical-summary-table tr &gt; td[rowspan=&quot;2&quot;]:first-child + td { border-bottom: hidden; }

   .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 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(&quot;. &quot;); }
   #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: &quot;Times&quot;, 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(&quot;. &quot;) }
   .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; }

   .three-column-nowrap tr &gt; td:first-child,
   .three-column-nowrap tr &gt; td:first-child + td,
   .three-column-nowrap tr &gt; td:first-child + td + td { white-space: nowrap; }

   .details-example img { vertical-align: top; }

   .parse-error-table td &gt; p:first-child { margin-top: 0; }

   #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 &gt; table &gt; tbody &gt; tr &gt; td:first-child + td,
   #named-character-references-table &gt; table &gt; tbody &gt; tr &gt; td:last-child { text-align: center; }
   #named-character-references-table &gt; table &gt; tbody &gt; tr &gt; td:last-child:hover &gt; 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 &gt; table &gt; tbody &gt; tr#entity-CounterClockwiseContourIntegral &gt; td:first-child { font-size: 0.5em; }

   .glyph.control { color: red; }

   #table-example-1 * { font-family: &quot;Essays1743&quot;, serif; line-height: 1.01em; }
   @font-face {
     font-family: 'Essays1743';
     src: url('/fonts/Essays1743.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-weight: bold;
     src: url('/fonts/Essays1743-Bold.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     src: url('/fonts/Essays1743-Italic.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     font-weight: bold;
     src: url('/fonts/Essays1743-BoldItalic.ttf');
   }

   @media (max-width: 767px) {
     #abstractimg { width: 100%; }
   }
   #abstractimg, #abstractimg text { font: inherit; }
   #abstractimg rect { fill: #424242; }
   #abstractimg text { fill: #ffffff; font-size: 18px }
   #abstractimg .top { word-spacing: 50px; text-anchor: middle; }
   #abstractimg .left, #abstractimg .bottom { word-spacing: 12px; }
   #abstractimg .right { font-size: 25px; }
  </style></head><body><header class="head with-buttons" id="head">
   <a class="logo" href="https://whatwg.org/"><img alt="WHATWG" height="100" src="https://resources.whatwg.org/logo.svg" width="100"/></a>
   <hgroup><h1 class="allcaps">HTML</h1><h2 class="no-num no-toc" id="living-standard">Living Standard — Last Updated <span class="pubdate">31 August 2017</span></h2></hgroup>
   
   
  <p class="copyright">Parts of this specification are © Copyright 2004-2014 Apple Inc., Mozilla Foundation, and Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document.</p></header><h4 id="the-canvas-element"><span class="secno">4.12.5</span> The <dfn id="canvas"><code>canvas</code></dfn> element<a class="self-link" href="#the-canvas-element"/></h4><div class="status"><input onclick="toggleStatus(this)" type="button" value="⋰"/><p class="support"><strong>Support:</strong> canvas<span class="and_chr yes"><span>Chrome for Android</span> <span>59+</span></span><span class="chrome yes"><span>Chrome</span> <span>4+</span></span><span class="and_uc yes"><span>UC Browser for Android</span> <span>11.4+</span></span><span class="ios_saf yes"><span>iOS Safari</span> <span>3.2+</span></span><span class="firefox yes"><span>Firefox</span> <span>3.6+</span></span><span class="ie yes"><span>IE</span> <span>9+</span></span><span class="samsung yes"><span>Samsung Internet</span> <span>4+</span></span><span class="op_mini partial"><span>Opera Mini (limited)</span> <span>all+</span></span><span class="safari yes"><span>Safari</span> <span>4+</span></span><span class="android yes"><span>Android Browser</span> <span>3+</span></span><span class="opera yes"><span>Opera</span> <span>9+</span></span><span class="edge yes"><span>Edge</span> <span>12+</span></span></p><p class="caniuse">Source: <a href="https://caniuse.com/#feat=canvas">caniuse.com</a></p></div>

  <dl class="element"><dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-categories" id="the-canvas-element:concept-element-categories">Categories</a>:</dt><dd><a href="https://html.spec.whatwg.org/multipage/dom.html#flow-content-2" id="the-canvas-element:flow-content-2">Flow content</a>.</dd><dd><a href="https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2" id="the-canvas-element:phrasing-content-2">Phrasing content</a>.</dd><dd><a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category">Embedded content</a>.</dd><dd><a href="https://html.spec.whatwg.org/multipage/dom.html#palpable-content-2" id="the-canvas-element:palpable-content-2">Palpable content</a>.</dd><dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-contexts" id="the-canvas-element:concept-element-contexts">Contexts in which this element can be used</a>:</dt><dd>Where <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category-2">embedded content</a> is expected.</dd><dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-content-model" id="the-canvas-element:concept-element-content-model">Content model</a>:</dt><dd><a href="https://html.spec.whatwg.org/multipage/dom.html#transparent" id="the-canvas-element:transparent">Transparent</a>, but with no <a href="https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2" id="the-canvas-element:interactive-content-2">interactive content</a> descendants except
   for <code id="the-canvas-element:the-a-element"><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">a</a></code> elements, <code id="the-canvas-element:the-img-element"><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code> elements with
   <code id="the-canvas-element:attr-hyperlink-usemap"><a href="https://html.spec.whatwg.org/multipage/image-maps.html#attr-hyperlink-usemap">usemap</a></code> attributes, <code id="the-canvas-element:the-button-element"><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">button</a></code> elements,
   <code id="the-canvas-element:the-input-element"><a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element">input</a></code> elements whose <code id="the-canvas-element:attr-input-type"><a href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type">type</a></code> attribute are in
   the <a href="https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type=checkbox)" id="the-canvas-element:checkbox-state-(type=checkbox)">Checkbox</a> or <a href="https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio)" id="the-canvas-element:radio-button-state-(type=radio)">Radio Button</a> states, <code id="the-canvas-element:the-input-element-2"><a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element">input</a></code> elements that are
   <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-button" id="the-canvas-element:concept-button">buttons</a>, <code id="the-canvas-element:the-select-element"><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">select</a></code> elements with a <code id="the-canvas-element:attr-select-multiple"><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-select-multiple">multiple</a></code> attribute or a <a href="https://html.spec.whatwg.org/multipage/form-elements.html#concept-select-size" id="the-canvas-element:concept-select-size">display size</a> greater than 1, and elements that would not be
   <a href="https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2" id="the-canvas-element:interactive-content-2-2">interactive content</a> except for having the <code id="the-canvas-element:attr-tabindex"><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex">tabindex</a></code> attribute specified.</dd><dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-tag-omission" id="the-canvas-element:concept-element-tag-omission">Tag omission in text/html</a>:</dt><dd>Neither tag is omissible.</dd><dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-attributes" id="the-canvas-element:concept-element-attributes">Content attributes</a>:</dt><dd><a href="https://html.spec.whatwg.org/multipage/dom.html#global-attributes" id="the-canvas-element:global-attributes">Global attributes</a></dd><dd><code id="the-canvas-element:attr-canvas-width"><a href="#attr-canvas-width">width</a></code> — Horizontal dimension</dd><dd><code id="the-canvas-element:attr-canvas-height"><a href="#attr-canvas-height">height</a></code> — Vertical dimension</dd><dt><a href="https://html.spec.whatwg.org/multipage/dom.html#concept-element-dom" id="the-canvas-element:concept-element-dom">DOM interface</a>:</dt><dd>
    <pre class="idl">typedef (<a href="#canvasrenderingcontext2d" id="the-canvas-element:canvasrenderingcontext2d">CanvasRenderingContext2D</a> or <a data-x-internal="webglrenderingcontext" href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext" id="the-canvas-element:webglrenderingcontext">WebGLRenderingContext</a>) <dfn id="renderingcontext">RenderingContext</dfn>;

[Exposed=Window,
 <a href="https://html.spec.whatwg.org/multipage/dom.html#htmlconstructor" id="the-canvas-element:htmlconstructor">HTMLConstructor</a>]
interface <dfn id="htmlcanvaselement">HTMLCanvasElement</dfn> : <a href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement" id="the-canvas-element:htmlelement">HTMLElement</a> {
  [<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="the-canvas-element:cereactions">CEReactions</a>] attribute unsigned long <a href="#dom-canvas-width" id="the-canvas-element:dom-canvas-width">width</a>;
  [<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="the-canvas-element:cereactions-2">CEReactions</a>] attribute unsigned long <a href="#dom-canvas-height" id="the-canvas-element:dom-canvas-height">height</a>;

  <a href="#renderingcontext" id="the-canvas-element:renderingcontext">RenderingContext</a>? <a href="#dom-canvas-getcontext-2" id="the-canvas-element:dom-canvas-getcontext-2">getContext</a>(DOMString contextId, any... arguments);

  USVString <a href="#dom-canvas-todataurl-2" id="the-canvas-element:dom-canvas-todataurl-2">toDataURL</a>(optional DOMString type, optional any quality);
  void <a href="#dom-canvas-toblob-2" id="the-canvas-element:dom-canvas-toblob-2">toBlob</a>(<a href="#blobcallback" id="the-canvas-element:blobcallback">BlobCallback</a> _callback, optional DOMString type, optional any quality);
  <a href="#offscreencanvas" id="the-canvas-element:offscreencanvas">OffscreenCanvas</a> <a href="#dom-canvas-transfercontroltooffscreen-2" id="the-canvas-element:dom-canvas-transfercontroltooffscreen-2">transferControlToOffscreen</a>();
};

callback <dfn id="blobcallback">BlobCallback</dfn> = void (<a data-x-internal="blob" href="https://w3c.github.io/FileAPI/#blob" id="the-canvas-element:blob">Blob</a>? blob);</pre>
   </dd></dl>

  <p>The <code id="the-canvas-element:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element provides scripts with a resolution-dependent bitmap canvas,
  which can be used for rendering graphs, game graphics, art, or other visual images on the fly.</p>

  <p>Authors should not use the <code id="the-canvas-element:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> element in a document when a more suitable
  element is available. For example, it is inappropriate to use a <code id="the-canvas-element:the-canvas-element-3"><a href="#the-canvas-element">canvas</a></code> element to
  render a page heading: if the desired presentation of the heading is graphically intense, it
  should be marked up using appropriate elements (typically <code id="the-canvas-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"><a href="https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>) and then styled using
  CSS and supporting technologies such as Web Components.</p>

  <p>When authors use the <code id="the-canvas-element:the-canvas-element-4"><a href="#the-canvas-element">canvas</a></code> element, they must also provide content that, when
  presented to the user, conveys essentially the same function or purpose as the
  <code id="the-canvas-element:the-canvas-element-5"><a href="#the-canvas-element">canvas</a></code>'s bitmap. This content may be placed as content of the <code id="the-canvas-element:the-canvas-element-6"><a href="#the-canvas-element">canvas</a></code>
  element. The contents of the <code id="the-canvas-element:the-canvas-element-7"><a href="#the-canvas-element">canvas</a></code> element, if any, are the element's <a href="https://html.spec.whatwg.org/multipage/dom.html#fallback-content" id="the-canvas-element:fallback-content">fallback
  content</a>.</p>

  <hr/>

  <p>In interactive visual media, if <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-n-script" id="the-canvas-element:concept-n-script">scripting is enabled</a> for
  the <code id="the-canvas-element:the-canvas-element-8"><a href="#the-canvas-element">canvas</a></code> element, and if support for <code id="the-canvas-element:the-canvas-element-9"><a href="#the-canvas-element">canvas</a></code> elements has been enabled,
  then the <code id="the-canvas-element:the-canvas-element-10"><a href="#the-canvas-element">canvas</a></code> element <a href="https://html.spec.whatwg.org/multipage/dom.html#represents" id="the-canvas-element:represents">represents</a> <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category-3">embedded content</a>
  consisting of a dynamically created image, the element's bitmap.</p>

  <p>In non-interactive, static, visual media, if the <code id="the-canvas-element:the-canvas-element-11"><a href="#the-canvas-element">canvas</a></code> element has been
  previously associated with a rendering context (e.g. if the page was viewed in an interactive
  visual medium and is now being printed, or if some script that ran during the page layout process
  painted on the element), then the <code id="the-canvas-element:the-canvas-element-12"><a href="#the-canvas-element">canvas</a></code> element <a href="https://html.spec.whatwg.org/multipage/dom.html#represents" id="the-canvas-element:represents-2">represents</a>
  <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category-4">embedded content</a> with the element's current bitmap and size. Otherwise, the element
  represents its <a href="https://html.spec.whatwg.org/multipage/dom.html#fallback-content" id="the-canvas-element:fallback-content-2">fallback content</a> instead.</p>

  <p>In non-visual media, and in visual media if <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-n-noscript" id="the-canvas-element:concept-n-noscript">scripting is
  disabled</a> for the <code id="the-canvas-element:the-canvas-element-13"><a href="#the-canvas-element">canvas</a></code> element or if support for <code id="the-canvas-element:the-canvas-element-14"><a href="#the-canvas-element">canvas</a></code> elements
  has been disabled, the <code id="the-canvas-element:the-canvas-element-15"><a href="#the-canvas-element">canvas</a></code> element <a href="https://html.spec.whatwg.org/multipage/dom.html#represents" id="the-canvas-element:represents-3">represents</a> its <a href="https://html.spec.whatwg.org/multipage/dom.html#fallback-content" id="the-canvas-element:fallback-content-3">fallback
  content</a> instead.</p>

  
  <p>When a <code id="the-canvas-element:the-canvas-element-16"><a href="#the-canvas-element">canvas</a></code> element <a href="https://html.spec.whatwg.org/multipage/dom.html#represents" id="the-canvas-element:represents-4">represents</a> <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category-5">embedded content</a>, the
  user can still focus descendants of the <code id="the-canvas-element:the-canvas-element-17"><a href="#the-canvas-element">canvas</a></code> element (in the <a href="https://html.spec.whatwg.org/multipage/dom.html#fallback-content" id="the-canvas-element:fallback-content-4">fallback
  content</a>). When an element is <a href="https://html.spec.whatwg.org/multipage/interaction.html#focused" id="the-canvas-element:focused">focused</a>, it is the target of keyboard interaction
  events (even though the element itself is not visible). This allows authors to make an interactive
  canvas keyboard-accessible: authors should have a one-to-one mapping of interactive regions to <i id="the-canvas-element:focusable-area"><a href="https://html.spec.whatwg.org/multipage/interaction.html#focusable-area">focusable areas</a></i> in the <a href="https://html.spec.whatwg.org/multipage/dom.html#fallback-content" id="the-canvas-element:fallback-content-5">fallback content</a>. (Focus has no
  effect on mouse interaction events.) <a href="https://html.spec.whatwg.org/multipage/references.html#refsUIEVENTS">[UIEVENTS]</a></p> 

  <p>An element whose nearest <code id="the-canvas-element:the-canvas-element-18"><a href="#the-canvas-element">canvas</a></code> element ancestor is <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="the-canvas-element:being-rendered">being rendered</a>
  and <a href="https://html.spec.whatwg.org/multipage/dom.html#represents" id="the-canvas-element:represents-5">represents</a> <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category-6">embedded content</a> is an element that is <dfn id="being-used-as-relevant-canvas-fallback-content">being used as
  relevant canvas fallback content</dfn>.</p>

  <hr/>

  <p>The <code id="the-canvas-element:the-canvas-element-19"><a href="#the-canvas-element">canvas</a></code> element has two attributes to control the size of the element's bitmap:
  <dfn id="attr-canvas-width"><code>width</code></dfn> and <dfn id="attr-canvas-height"><code>height</code></dfn>. These attributes, when specified, must have
  values that are <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-non-negative-integer" id="the-canvas-element:valid-non-negative-integer">valid non-negative integers</a>. The <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-non-negative-integers" id="the-canvas-element:rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> must be used to obtain their
  numeric values. If an attribute is missing, or if parsing its value returns an error, then the
  default value must be used instead. The <code id="the-canvas-element:attr-canvas-width-2"><a href="#attr-canvas-width">width</a></code>
  attribute defaults to 300, and the <code id="the-canvas-element:attr-canvas-height-2"><a href="#attr-canvas-height">height</a></code> attribute
  defaults to 150.</p>

  <p>The <a data-x-internal="intrinsic-dimensions" href="https://drafts.csswg.org/css2/conform.html#intrinsic" id="the-canvas-element:intrinsic-dimensions">intrinsic dimensions</a> of the <code id="the-canvas-element:the-canvas-element-20"><a href="#the-canvas-element">canvas</a></code> element when it
  <a href="https://html.spec.whatwg.org/multipage/dom.html#represents" id="the-canvas-element:represents-6">represents</a> <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category-7">embedded content</a> are equal to the dimensions of the
  element's bitmap.</p>

  <p>The user agent must use a square pixel density consisting of one pixel of image data per
  coordinate space unit for the bitmaps of a <code id="the-canvas-element:the-canvas-element-21"><a href="#the-canvas-element">canvas</a></code> and its rendering contexts.</p>

  <p class="note">A <code id="the-canvas-element:the-canvas-element-22"><a href="#the-canvas-element">canvas</a></code> element can be sized arbitrarily by a style sheet, its
  bitmap is then subject to the <a data-x-internal="'object-fit'" href="https://drafts.csswg.org/css-images/#the-object-fit" id="the-canvas-element:'object-fit'">'object-fit'</a> CSS property.</p>

  
  <hr/>

  <p>The bitmaps of <code id="the-canvas-element:the-canvas-element-23"><a href="#the-canvas-element">canvas</a></code> elements, the bitmaps of <code id="the-canvas-element:imagebitmap"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> objects,
  as well as some of the bitmaps of rendering contexts, such as those described in the sections on
  the <code id="the-canvas-element:canvasrenderingcontext2d-2"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> and <code id="the-canvas-element:imagebitmaprenderingcontext"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> objects
  below, have an <dfn id="concept-canvas-origin-clean">origin-clean</dfn> flag, which can be
  set to true or false. Initially, when the <code id="the-canvas-element:the-canvas-element-24"><a href="#the-canvas-element">canvas</a></code> element or <code id="the-canvas-element:imagebitmap-2"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code>
  object is created, its bitmap's <a href="#concept-canvas-origin-clean" id="the-canvas-element:concept-canvas-origin-clean">origin-clean</a>
  flag must be set to true.</p>

  <p>A <code id="the-canvas-element:the-canvas-element-25"><a href="#the-canvas-element">canvas</a></code> element can have a rendering context bound to it. Initially, it does not
  have a bound rendering context. To keep track of whether it has a rendering context or not, and
  what kind of rendering context it is, a <code id="the-canvas-element:the-canvas-element-26"><a href="#the-canvas-element">canvas</a></code> also has a <dfn id="concept-canvas-context-mode">canvas context mode</dfn>, which is initially <dfn id="concept-canvas-none">none</dfn> but can be changed to either <dfn id="concept-canvas-placeholder">placeholder</dfn>, <dfn id="concept-canvas-2d">2d</dfn>, <dfn id="concept-canvas-bitmaprenderer">bitmaprenderer</dfn>, or <dfn id="concept-canvas-webgl">webgl</dfn> by algorithms defined in this specification.</p>

  <p>When its <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode">canvas context mode</a> is <a href="#concept-canvas-none" id="the-canvas-element:concept-canvas-none">none</a>, a <code id="the-canvas-element:the-canvas-element-27"><a href="#the-canvas-element">canvas</a></code> element has no rendering context,
  and its bitmap must be fully transparent black with an <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-width" id="the-canvas-element:intrinsic-width">intrinsic width</a> equal to the
  numeric value of the element's <code id="the-canvas-element:attr-canvas-width-3"><a href="#attr-canvas-width">width</a></code> attribute and an
  <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-height" id="the-canvas-element:intrinsic-height">intrinsic height</a> equal to the numeric value of the element's <code id="the-canvas-element:attr-canvas-height-3"><a href="#attr-canvas-height">height</a></code> attribute, those values being interpreted in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="the-canvas-element:'px'">CSS pixels</a>, and being updated as the attributes are set, changed, or
  removed.</p>

  <p>When its <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-2">canvas context mode</a> is <a href="#concept-canvas-placeholder" id="the-canvas-element:concept-canvas-placeholder">placeholder</a>, a <code id="the-canvas-element:the-canvas-element-28"><a href="#the-canvas-element">canvas</a></code> element has no
  rendering context. It serves as a placeholder for an <code id="the-canvas-element:offscreencanvas-2"><a href="#offscreencanvas">OffscreenCanvas</a></code> object, and
  the content of the <code id="the-canvas-element:the-canvas-element-29"><a href="#the-canvas-element">canvas</a></code> element is updated by calling the <code id="the-canvas-element:offscreencontext-commit"><a href="#offscreencontext-commit">commit()</a></code> method of the <code id="the-canvas-element:offscreencanvas-3"><a href="#offscreencanvas">OffscreenCanvas</a></code>
  object's rendering context.</p>

  <p>When a <code id="the-canvas-element:the-canvas-element-30"><a href="#the-canvas-element">canvas</a></code> element represents <a href="https://html.spec.whatwg.org/multipage/dom.html#embedded-content-category" id="the-canvas-element:embedded-content-category-8">embedded content</a>, it provides a
  <a data-x-internal="paint-source" href="https://drafts.csswg.org/css-images-4/#paint-source" id="the-canvas-element:paint-source">paint source</a> whose width is the element's <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-width" id="the-canvas-element:intrinsic-width-2">intrinsic width</a>, whose height
  is the element's <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-height" id="the-canvas-element:intrinsic-height-2">intrinsic height</a>, and whose appearance is the element's bitmap.</p>

  <p>Whenever the <code id="the-canvas-element:attr-canvas-width-4"><a href="#attr-canvas-width">width</a></code> and <code id="the-canvas-element:attr-canvas-height-4"><a href="#attr-canvas-height">height</a></code> content attributes are set, removed, changed, or
  redundantly set to the value they already have, then the user agent must perform the action
  from the row of the following table that corresponds to the <code id="the-canvas-element:the-canvas-element-31"><a href="#the-canvas-element">canvas</a></code> element's <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-3">context mode</a>.</p>

  <table><thead><tr><th>
      <p><a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-4">Context Mode</a></p>
     </th><th>
      <p>Action</p>

   </th></tr></thead><tbody><tr><th>
      <p><a href="#concept-canvas-2d" id="the-canvas-element:concept-canvas-2d">2d</a></p>
     </th><td>
      <p>Follow the steps to <a href="#concept-canvas-set-bitmap-dimensions" id="the-canvas-element:concept-canvas-set-bitmap-dimensions">set bitmap
      dimensions</a> to the numeric values of the <code id="the-canvas-element:attr-canvas-width-5"><a href="#attr-canvas-width">width</a></code>
      and <code id="the-canvas-element:attr-canvas-height-5"><a href="#attr-canvas-height">height</a></code> content attributes.</p>

    </td></tr><tr><th>
      <p><a href="#concept-canvas-webgl" id="the-canvas-element:concept-canvas-webgl">webgl</a></p>
     </th><td>
      <p>Follow the behavior defined in the WebGL specification. <a href="https://html.spec.whatwg.org/multipage/references.html#refsWEBGL">[WEBGL]</a></p>

    </td></tr><tr><th>
      <p><a href="#concept-canvas-bitmaprenderer" id="the-canvas-element:concept-canvas-bitmaprenderer">bitmaprenderer</a></p>
     </th><td>
      <p>If the context's <a href="#concept-imagebitmaprenderingcontext-bitmap-mode" id="the-canvas-element:concept-imagebitmaprenderingcontext-bitmap-mode">bitmap
      mode</a> is set to <a href="#concept-imagebitmaprenderingcontext-blank" id="the-canvas-element:concept-imagebitmaprenderingcontext-blank">blank</a>,
      run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-canvas-element:set-an-imagebitmaprenderingcontext's-output-bitmap">set an <code>ImageBitmapRenderingContext</code>'s output bitmap</a>,
      passing the <code id="the-canvas-element:the-canvas-element-32"><a href="#the-canvas-element">canvas</a></code> element's rendering context.</p>

    </td></tr><tr><th>
      <p><a href="#concept-canvas-placeholder" id="the-canvas-element:concept-canvas-placeholder-2">placeholder</a></p>
     </th><td>
      <p>Do nothing.</p>

    </td></tr><tr><th>
      <p><a href="#concept-canvas-none" id="the-canvas-element:concept-canvas-none-2">none</a></p>
     </th><td>
      <p>Do nothing.</p>
  </td></tr></tbody></table>

  <p>The <dfn id="dom-canvas-width"><code>width</code></dfn> and <dfn id="dom-canvas-height"><code>height</code></dfn> IDL attributes must <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect" id="the-canvas-element:reflect">reflect</a> the
  respective content attributes of the same name, with the same defaults.</p>

  
  <hr/>

  
  <dl class="domintro"><dt><var>context</var> = <var>canvas</var> . <code id="dom-canvas-getcontext"><a href="#dom-canvas-getcontext-2">getContext</a></code>(<var>contextId</var> [, ... ] )</dt><dd>

    <p>Returns an object that exposes an API for drawing on the canvas. The first argument
    specifies the desired API, either &quot;<code id="the-canvas-element:canvas-context-2d"><a href="#canvas-context-2d">2d</a></code>&quot;, &quot;<code id="the-canvas-element:canvas-context-bitmaprenderer"><a href="#canvas-context-bitmaprenderer">bitmaprenderer</a></code>&quot; or &quot;<code id="the-canvas-element:canvas-context-webgl"><a href="#canvas-context-webgl">webgl</a></code>&quot;. Subsequent arguments are handled by that API.</p>

    <p>This specification defines the &quot;<code id="the-canvas-element:canvas-context-2d-2"><a href="#canvas-context-2d">2d</a></code>&quot; and &quot;<code id="the-canvas-element:canvas-context-bitmaprenderer-2"><a href="#canvas-context-bitmaprenderer">bitmaprenderer</a></code>&quot; contexts below. There is also a
    specification that defines a &quot;<code id="the-canvas-element:canvas-context-webgl-2"><a href="#canvas-context-webgl">webgl</a></code>&quot; context.
    <a href="https://html.spec.whatwg.org/multipage/references.html#refsWEBGL">[WEBGL]</a></p>

    <p>Returns null if the given context ID is not supported, or if the canvas has already been
    initialized with another context type (e.g. trying to get a &quot;<code id="the-canvas-element:canvas-context-2d-3"><a href="#canvas-context-2d">2d</a></code>&quot; context after getting a &quot;<code id="the-canvas-element:canvas-context-webgl-3"><a href="#canvas-context-webgl">webgl</a></code>&quot; context).</p>

   </dd></dl>

  
  <p>The <dfn id="dom-canvas-getcontext-2"><code>getContext(<var>contextId</var>,
  <var>arguments...</var>)</code></dfn> method of the <code id="the-canvas-element:the-canvas-element-33"><a href="#the-canvas-element">canvas</a></code> element, when invoked,
  must run the steps in the cell of the following table whose column header describes the
  <code id="the-canvas-element:the-canvas-element-34"><a href="#the-canvas-element">canvas</a></code> element's <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-5">canvas context
  mode</a> and whose row header describes the method's first argument.</p>

  <table><thead><tr><td>
     </td><th><a href="#concept-canvas-none" id="the-canvas-element:concept-canvas-none-3">none</a>
     </th><th><a href="#concept-canvas-2d" id="the-canvas-element:concept-canvas-2d-2">2d</a>
     </th><th><a href="#concept-canvas-bitmaprenderer" id="the-canvas-element:concept-canvas-bitmaprenderer-2">bitmaprenderer</a>
     </th><th><a href="#concept-canvas-webgl" id="the-canvas-element:concept-canvas-webgl-2">webgl</a>
     </th><th><a href="#concept-canvas-placeholder" id="the-canvas-element:concept-canvas-placeholder-3">placeholder</a>
   </th></tr></thead><tbody><tr><th>&quot;<dfn id="canvas-context-2d"><code>2d</code></dfn>&quot;
     </th><td>

      Follow the <a href="#2d-context-creation-algorithm" id="the-canvas-element:2d-context-creation-algorithm">2D context creation algorithm</a> defined in the section below, passing
      it the <code id="the-canvas-element:the-canvas-element-35"><a href="#the-canvas-element">canvas</a></code> element and the method's <var>arguments...</var>, to obtain a
      <code id="the-canvas-element:canvasrenderingcontext2d-3"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object; if this does not throw an exception, then
      set the <code id="the-canvas-element:the-canvas-element-36"><a href="#the-canvas-element">canvas</a></code> element's <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-6">context
      mode</a> to <a href="#concept-canvas-2d" id="the-canvas-element:concept-canvas-2d-3">2d</a>, and return the
      <code id="the-canvas-element:canvasrenderingcontext2d-4"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object.

     </td><td>
      Return the same object as was returned the last time the method was invoked with this same
      first argument.
     </td><td>
      Return null.
     </td><td>
      Return null.
     </td><td>
      Throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-canvas-element:invalidstateerror">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-canvas-element:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.

    </td></tr><tr><th>&quot;<dfn id="canvas-context-bitmaprenderer"><code>bitmaprenderer</code></dfn>&quot;
     </th><td>

      Follow the <a href="#imagebitmaprenderingcontext-creation-algorithm" id="the-canvas-element:imagebitmaprenderingcontext-creation-algorithm"><code>ImageBitmapRenderingContext</code> creation algorithm</a> defined
      in the section below, passing it the <code id="the-canvas-element:the-canvas-element-37"><a href="#the-canvas-element">canvas</a></code> element and the method's
      <var>arguments...</var>, to obtain an <code id="the-canvas-element:imagebitmaprenderingcontext-2"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object; then
      set the <code id="the-canvas-element:the-canvas-element-38"><a href="#the-canvas-element">canvas</a></code> element's <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-7">context
      mode</a> to <a href="#concept-canvas-bitmaprenderer" id="the-canvas-element:concept-canvas-bitmaprenderer-3">bitmaprenderer</a>, and return the
      <code id="the-canvas-element:imagebitmaprenderingcontext-3"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object.

     </td><td>
      Return null.
     </td><td>
      Return the same object as was returned the last time the method was invoked with this same
      first argument.
     </td><td>
      Return null.
     </td><td>
      Throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-canvas-element:invalidstateerror-2">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-canvas-element:domexception-2"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.

    </td></tr><tr><th>&quot;<dfn id="canvas-context-webgl"><code>webgl</code></dfn>&quot;, if the user agent supports the WebGL feature in its current configuration
     </th><td>

      Follow the instructions given in the WebGL specification's <i>Context Creation</i> section to
      obtain either a <code id="the-canvas-element:webglrenderingcontext-2"><a data-x-internal="webglrenderingcontext" href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext">WebGLRenderingContext</a></code> or null; if the returned value is null,
      then return null and abort these steps, otherwise, set the <code id="the-canvas-element:the-canvas-element-39"><a href="#the-canvas-element">canvas</a></code> element's
      <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-8">context mode</a> to <a href="#concept-canvas-webgl" id="the-canvas-element:concept-canvas-webgl-3">webgl</a>, and return the <code id="the-canvas-element:webglrenderingcontext-3"><a data-x-internal="webglrenderingcontext" href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext">WebGLRenderingContext</a></code>
      object <a href="https://html.spec.whatwg.org/multipage/references.html#refsWEBGL">[WEBGL]</a>

     </td><td>
      Return null.
     </td><td>
      Return null.
     </td><td>
      Return the same object as was returned the last time the method was invoked with this same
      first argument.
     </td><td>
      Throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-canvas-element:invalidstateerror-3">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-canvas-element:domexception-3"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.

    </td></tr><tr><th>An unsupported value*
     </th><td>
      Return null.
     </td><td>
      Return null.
     </td><td>
      Return null.
     </td><td>
      Return null.
     </td><td>
      Throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-canvas-element:invalidstateerror-4">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-canvas-element:domexception-4"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.

  </td></tr></tbody></table>

  <p class="tablenote"><small>* For example, the &quot;<code id="the-canvas-element:canvas-context-webgl-4"><a href="#canvas-context-webgl">webgl</a></code>&quot;
  value in the case of a user agent having exhausted the graphics hardware's abilities and having no
  software fallback implementation.</small></p>

  <hr/>

  
  <dl class="domintro"><dt><var>url</var> = <var>canvas</var> . <code id="dom-canvas-todataurl"><a href="#dom-canvas-todataurl-2">toDataURL</a></code>( [ <var>type</var> [, <var>quality</var> ] ] )</dt><dd>

    <p>Returns a <a data-x-internal="data-protocol" href="https://tools.ietf.org/html/rfc2397#section-2" id="the-canvas-element:data-protocol"><code>data:</code> URL</a> for the image in the
    canvas.</p>

    <p>The first argument, if provided, controls the type of the image to be returned (e.g. PNG or
    JPEG). The default is &quot;<code id="the-canvas-element:image/png"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/png">image/png</a></code>&quot;; that type is also used if the given type isn't
    supported. The second argument applies if the type is an image format that supports variable
    quality (such as &quot;<code id="the-canvas-element:image/jpeg"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/jpeg">image/jpeg</a></code>&quot;), and is a number in the range 0.0 to 1.0 inclusive
    indicating the desired quality level for the resulting image.</p>

    <p>When trying to use types other than &quot;<code id="the-canvas-element:image/png-2"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/png">image/png</a></code>&quot;, authors can check if the image
    was really returned in the requested format by checking to see if the returned string starts
    with one of the exact strings &quot;<code>data:image/png,</code>&quot; or &quot;<code>data:image/png;</code>&quot;. If it does, the image is PNG, and thus the requested type was
    not supported. (The one exception to this is if the canvas has either no height or no width, in
    which case the result might simply be &quot;<code>data:,</code>&quot;.)</p>

   </dd><dt><var>canvas</var> . <code id="dom-canvas-toblob"><a href="#dom-canvas-toblob-2">toBlob</a></code>(<var>callback</var> [, <var>type</var> [, quality ] ] )</dt><dd>

    <p>Creates a <code id="the-canvas-element:blob-2"><a data-x-internal="blob" href="https://w3c.github.io/FileAPI/#blob">Blob</a></code> object representing a file containing the image in the canvas,
    and invokes a callback with a handle to that object.</p>

    <p>The second argument, if provided, controls the type of the image to be returned (e.g. PNG or
    JPEG). The default is &quot;<code id="the-canvas-element:image/png-3"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/png">image/png</a></code>&quot;; that type is also used if the given type isn't
    supported. The third argument applies if the type is an image format that supports variable
    quality (such as &quot;<code id="the-canvas-element:image/jpeg-2"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/jpeg">image/jpeg</a></code>&quot;), and is a number in the range 0.0 to 1.0 inclusive
    indicating the desired quality level for the resulting image.</p>

   </dd><dt><var>canvas</var> . <code id="dom-canvas-transfercontroltooffscreen"><a href="#dom-canvas-transfercontroltooffscreen-2">transferControlToOffscreen</a></code>()</dt><dd>
    <p>Returns a newly created <code id="the-canvas-element:offscreencanvas-4"><a href="#offscreencanvas">OffscreenCanvas</a></code> object that uses the
    <code id="the-canvas-element:the-canvas-element-40"><a href="#the-canvas-element">canvas</a></code> element as a placeholder. Once the <code id="the-canvas-element:the-canvas-element-41"><a href="#the-canvas-element">canvas</a></code> element has become a
    placeholder for an <code id="the-canvas-element:offscreencanvas-5"><a href="#offscreencanvas">OffscreenCanvas</a></code> object, its intrinsic size can no longer be
    changed, and it cannot have a rendering context. The content of the placeholder canvas is
    updated by calling the <code id="the-canvas-element:offscreencontext-commit-2"><a href="#offscreencontext-commit">commit()</a></code> method of the
    <code id="the-canvas-element:offscreencanvas-6"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's rendering context.
    </p>
   </dd></dl>

  
  <p>The <dfn id="dom-canvas-todataurl-2"><code>toDataURL(<var>type</var>,
  <var>quality</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If this <code id="the-canvas-element:the-canvas-element-42"><a href="#the-canvas-element">canvas</a></code> element's bitmap's <a href="#concept-canvas-origin-clean" id="the-canvas-element:concept-canvas-origin-clean-2">origin-clean</a> flag is set to false, then throw a
   <a data-x-internal="securityerror" href="https://heycam.github.io/webidl/#securityerror" id="the-canvas-element:securityerror">&quot;<code>SecurityError</code>&quot;</a> <code id="the-canvas-element:domexception-5"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these steps.</p>


   </li><li><p>If this <code id="the-canvas-element:the-canvas-element-43"><a href="#the-canvas-element">canvas</a></code> element's bitmap has no pixels (i.e. either its horizontal
   dimension or its vertical dimension is zero) then return the string &quot;<code>data:,</code>&quot; and abort these steps. (This is the shortest <a data-x-internal="data-protocol" href="https://tools.ietf.org/html/rfc2397#section-2" id="the-canvas-element:data-protocol-2"><code>data:</code> URL</a>; it represents the empty string in a <code>text/plain</code> resource.)</p></li><li><p>Let <var>file</var> be <a href="#a-serialisation-of-the-bitmap-as-a-file" id="the-canvas-element:a-serialisation-of-the-bitmap-as-a-file">a
   serialization of this <code>canvas</code> element's bitmap as a file</a>, passing
   <var>type</var> and <var>quality</var> if they were given.</p></li><li><p>If <var>file</var> is null then return &quot;<code>data:,</code>&quot;.</p></li><li><p>Return a <a data-x-internal="data-protocol" href="https://tools.ietf.org/html/rfc2397#section-2" id="the-canvas-element:data-protocol-3"><code>data:</code> URL</a> representing
   <var>file</var>. <a href="https://html.spec.whatwg.org/multipage/references.html#refsRFC2397">[RFC2397]</a></p>

   
  </li></ol>

  <p>The <dfn id="dom-canvas-toblob-2"><code>toBlob(<var>callback</var>, <var>type</var>,
  <var>quality</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If this <code id="the-canvas-element:the-canvas-element-44"><a href="#the-canvas-element">canvas</a></code> element's bitmap's <a href="#concept-canvas-origin-clean" id="the-canvas-element:concept-canvas-origin-clean-3">origin-clean</a> flag is set to false, then throw a
   <a data-x-internal="securityerror" href="https://heycam.github.io/webidl/#securityerror" id="the-canvas-element:securityerror-2">&quot;<code>SecurityError</code>&quot;</a> <code id="the-canvas-element:domexception-6"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these steps.</p>


   </li><li>
    <p>If this <code id="the-canvas-element:the-canvas-element-45"><a href="#the-canvas-element">canvas</a></code> element's bitmap has no pixels (i.e. either its horizontal
    dimension or its vertical dimension is zero) then let <var>result</var> be null.</p>

    <p>Otherwise, let <var>result</var> be a <code id="the-canvas-element:blob-3"><a data-x-internal="blob" href="https://w3c.github.io/FileAPI/#blob">Blob</a></code> object representing <a href="#a-serialisation-of-the-bitmap-as-a-file" id="the-canvas-element:a-serialisation-of-the-bitmap-as-a-file-2">a serialization of this <code>canvas</code> element's
    bitmap as a file</a>, passing <var>type</var> and <var>quality</var> if they were given. <a href="https://html.spec.whatwg.org/multipage/references.html#refsFILEAPI">[FILEAPI]</a></p>
   </li><li><p>Return, but continue running these steps <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="the-canvas-element:in-parallel">in parallel</a>.</p></li><li><p><a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="the-canvas-element:queue-a-task">Queue a task</a> to <a data-x-internal="es-invoking-callback-functions" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="the-canvas-element:es-invoking-callback-functions">invoke</a>
   the <code id="the-canvas-element:blobcallback-2"><a href="#blobcallback">BlobCallback</a></code> <var>callback</var> with <var>result</var> as its argument. The
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#task-source" id="the-canvas-element:task-source">task source</a> for this task is the
   <dfn id="canvas-blob-serialisation-task-source">canvas blob serialization task
   source</dfn>.</p></li></ol>

  <p>The <dfn id="dom-canvas-transfercontroltooffscreen-2"><code>transferControlToOffscreen()</code></dfn> method,
  when invoked, must run these steps:</p>

  <ol><li><p>If this <code id="the-canvas-element:the-canvas-element-46"><a href="#the-canvas-element">canvas</a></code> element's <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-9">context
   mode</a> is not set to <a href="#concept-canvas-none" id="the-canvas-element:concept-canvas-none-4">none</a>, throw an
   <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-canvas-element:invalidstateerror-5">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-canvas-element:domexception-7"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these
   steps.</p></li><li><p>Let <var>offscreenCanvas</var> be a new <code id="the-canvas-element:offscreencanvas-7"><a href="#offscreencanvas">OffscreenCanvas</a></code> object with its
   width and height equal to the values of the <code id="the-canvas-element:attr-canvas-width-6"><a href="#attr-canvas-width">width</a></code>
   and <code id="the-canvas-element:attr-canvas-height-6"><a href="#attr-canvas-height">height</a></code> content attributes of this
   <code id="the-canvas-element:the-canvas-element-47"><a href="#the-canvas-element">canvas</a></code> element.</p></li><li><p>Set the <a href="#offscreencanvas-placeholder" id="the-canvas-element:offscreencanvas-placeholder">placeholder <code>canvas</code>
   element</a> of <var>offscreenCanvas</var> to be a weak reference to this <code id="the-canvas-element:the-canvas-element-48"><a href="#the-canvas-element">canvas</a></code>
   element.</p></li><li><p>Set this <code id="the-canvas-element:the-canvas-element-49"><a href="#the-canvas-element">canvas</a></code> element's <a href="#concept-canvas-context-mode" id="the-canvas-element:concept-canvas-context-mode-10">context
   mode</a> to <a href="#concept-canvas-placeholder" id="the-canvas-element:concept-canvas-placeholder-4">placeholder</a>.</p></li><li><p>Return <var>offscreenCanvas</var>.</p></li></ol>

  
  <h5 id="2dcontext"><span class="secno">4.12.5.1</span> The 2D rendering context<a class="self-link" href="#2dcontext"/></h5>

  
  <pre class="idl">typedef (<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="2dcontext:htmlimageelement">HTMLImageElement</a> or
         <a data-x-internal="svgimageelement" href="https://www.w3.org/TR/SVG11/struct.html#InterfaceSVGImageElement" id="2dcontext:svgimageelement">SVGImageElement</a>) <dfn id="htmlorsvgimageelement">HTMLOrSVGImageElement</dfn>;

typedef (<a href="#htmlorsvgimageelement" id="2dcontext:htmlorsvgimageelement">HTMLOrSVGImageElement</a> or
         <a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="2dcontext:htmlvideoelement">HTMLVideoElement</a> or
         <a href="#htmlcanvaselement" id="2dcontext:htmlcanvaselement">HTMLCanvasElement</a> or
         <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap" id="2dcontext:imagebitmap">ImageBitmap</a> or
         <a href="#offscreencanvas" id="2dcontext:offscreencanvas">OffscreenCanvas</a>) <dfn id="canvasimagesource">CanvasImageSource</dfn>;

enum <dfn id="canvasfillrule">CanvasFillRule</dfn> { &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero">nonzero</a>&quot;, &quot;<a href="#dom-context-2d-fillrule-evenodd" id="2dcontext:dom-context-2d-fillrule-evenodd">evenodd</a>&quot; };

dictionary <dfn id="canvasrenderingcontext2dsettings">CanvasRenderingContext2DSettings</dfn> {
  boolean <a href="#dom-canvasrenderingcontext2dsettings-alpha" id="2dcontext:dom-canvasrenderingcontext2dsettings-alpha">alpha</a> = true;
};

enum <dfn id="imagesmoothingquality">ImageSmoothingQuality</dfn> { &quot;<a href="#dom-context-2d-imagesmoothingquality-low" id="2dcontext:dom-context-2d-imagesmoothingquality-low">low</a>&quot;, &quot;<a href="#dom-context-2d-imagesmoothingquality-medium" id="2dcontext:dom-context-2d-imagesmoothingquality-medium">medium</a>&quot;, &quot;<a href="#dom-context-2d-imagesmoothingquality-high" id="2dcontext:dom-context-2d-imagesmoothingquality-high">high</a>&quot; };

interface <dfn id="canvasrenderingcontext2d">CanvasRenderingContext2D</dfn> {
  // back-reference to the canvas
  readonly attribute <a href="#htmlcanvaselement" id="2dcontext:htmlcanvaselement-2">HTMLCanvasElement</a> <a href="#dom-context-2d-canvas-2" id="2dcontext:dom-context-2d-canvas-2">canvas</a>;
};
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d">CanvasRenderingContext2D</a> implements <a href="#canvasstate" id="2dcontext:canvasstate">CanvasState</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-2">CanvasRenderingContext2D</a> implements <a href="#canvastransform" id="2dcontext:canvastransform">CanvasTransform</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-3">CanvasRenderingContext2D</a> implements <a href="#canvascompositing" id="2dcontext:canvascompositing">CanvasCompositing</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-4">CanvasRenderingContext2D</a> implements <a href="#canvasimagesmoothing" id="2dcontext:canvasimagesmoothing">CanvasImageSmoothing</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-5">CanvasRenderingContext2D</a> implements <a href="#canvasfillstrokestyles" id="2dcontext:canvasfillstrokestyles">CanvasFillStrokeStyles</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-6">CanvasRenderingContext2D</a> implements <a href="#canvasshadowstyles" id="2dcontext:canvasshadowstyles">CanvasShadowStyles</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-7">CanvasRenderingContext2D</a> implements <a href="#canvasfilters" id="2dcontext:canvasfilters">CanvasFilters</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-8">CanvasRenderingContext2D</a> implements <a href="#canvasrect" id="2dcontext:canvasrect">CanvasRect</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-9">CanvasRenderingContext2D</a> implements <a href="#canvasdrawpath" id="2dcontext:canvasdrawpath">CanvasDrawPath</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-10">CanvasRenderingContext2D</a> implements <a href="#canvasuserinterface" id="2dcontext:canvasuserinterface">CanvasUserInterface</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-11">CanvasRenderingContext2D</a> implements <a href="#canvastext" id="2dcontext:canvastext">CanvasText</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-12">CanvasRenderingContext2D</a> implements <a href="#canvasdrawimage" id="2dcontext:canvasdrawimage">CanvasDrawImage</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-13">CanvasRenderingContext2D</a> implements <a href="#canvasimagedata" id="2dcontext:canvasimagedata">CanvasImageData</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-14">CanvasRenderingContext2D</a> implements <a href="#canvaspathdrawingstyles" id="2dcontext:canvaspathdrawingstyles">CanvasPathDrawingStyles</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-15">CanvasRenderingContext2D</a> implements <a href="#canvastextdrawingstyles" id="2dcontext:canvastextdrawingstyles">CanvasTextDrawingStyles</a>;
<a href="#canvasrenderingcontext2d" id="2dcontext:canvasrenderingcontext2d-16">CanvasRenderingContext2D</a> implements <a href="#canvaspath" id="2dcontext:canvaspath">CanvasPath</a>;

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasstate">CanvasState</dfn> {
  // state
  void <a href="#dom-context-2d-save-2" id="2dcontext:dom-context-2d-save-2">save</a>(); // push state on state stack
  void <a href="#dom-context-2d-restore-2" id="2dcontext:dom-context-2d-restore-2">restore</a>(); // pop state stack and restore state
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvastransform">CanvasTransform</dfn> {
  // transformations (default transform is the identity matrix)
  void <a href="#dom-context-2d-scale-2" id="2dcontext:dom-context-2d-scale-2">scale</a>(unrestricted double x, unrestricted double y);
  void <a href="#dom-context-2d-rotate-2" id="2dcontext:dom-context-2d-rotate-2">rotate</a>(unrestricted double angle);
  void <a href="#dom-context-2d-translate-2" id="2dcontext:dom-context-2d-translate-2">translate</a>(unrestricted double x, unrestricted double y);
  void <a href="#dom-context-2d-transform-2" id="2dcontext:dom-context-2d-transform-2">transform</a>(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);

  [NewObject] <a data-x-internal="dommatrix" href="https://drafts.fxtf.org/geometry/#dommatrix" id="2dcontext:dommatrix">DOMMatrix</a> <a href="#dom-context-2d-gettransform-2" id="2dcontext:dom-context-2d-gettransform-2">getTransform</a>();
  void <a href="#dom-context-2d-settransform-2" id="2dcontext:dom-context-2d-settransform-2">setTransform</a>(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
  void <a href="#dom-context-2d-settransform-2" id="2dcontext:dom-context-2d-settransform-2-2">setTransform</a>(optional <a data-x-internal="dommatrix2dinit" href="https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit" id="2dcontext:dommatrix2dinit">DOMMatrix2DInit</a> transform);
  void <a href="#dom-context-2d-resettransform-2" id="2dcontext:dom-context-2d-resettransform-2">resetTransform</a>();

};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvascompositing">CanvasCompositing</dfn> {
  // compositing
  attribute unrestricted double <a href="#dom-context-2d-globalalpha-2" id="2dcontext:dom-context-2d-globalalpha-2">globalAlpha</a>; // (default 1.0)
  attribute DOMString <a href="#dom-context-2d-globalcompositeoperation-2" id="2dcontext:dom-context-2d-globalcompositeoperation-2">globalCompositeOperation</a>; // (default source-over)
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasimagesmoothing">CanvasImageSmoothing</dfn> {
  // image smoothing
  attribute boolean <a href="#dom-context-2d-imagesmoothingenabled-2" id="2dcontext:dom-context-2d-imagesmoothingenabled-2">imageSmoothingEnabled</a>; // (default true)
  attribute <a href="#imagesmoothingquality" id="2dcontext:imagesmoothingquality">ImageSmoothingQuality</a> <a href="#dom-context-2d-imagesmoothingquality-2" id="2dcontext:dom-context-2d-imagesmoothingquality-2">imageSmoothingQuality</a>; // (default low)

};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasfillstrokestyles">CanvasFillStrokeStyles</dfn> {
  // colors and styles (see also the <a href="#canvaspathdrawingstyles" id="2dcontext:canvaspathdrawingstyles-2">CanvasPathDrawingStyles</a> and <a href="#canvastextdrawingstyles" id="2dcontext:canvastextdrawingstyles-2">CanvasTextDrawingStyles</a> interfaces)
  attribute (DOMString or CanvasGradient or CanvasPattern) <a href="#dom-context-2d-strokestyle-2" id="2dcontext:dom-context-2d-strokestyle-2">strokeStyle</a>; // (default black)
  attribute (DOMString or CanvasGradient or CanvasPattern) <a href="#dom-context-2d-fillstyle-2" id="2dcontext:dom-context-2d-fillstyle-2">fillStyle</a>; // (default black)
  <a href="#canvasgradient" id="2dcontext:canvasgradient">CanvasGradient</a> <a href="#dom-context-2d-createlineargradient-2" id="2dcontext:dom-context-2d-createlineargradient-2">createLinearGradient</a>(double x0, double y0, double x1, double y1);
  <a href="#canvasgradient" id="2dcontext:canvasgradient-2">CanvasGradient</a> <a href="#dom-context-2d-createradialgradient-2" id="2dcontext:dom-context-2d-createradialgradient-2">createRadialGradient</a>(double x0, double y0, double r0, double x1, double y1, double r1);
  <a href="#canvaspattern" id="2dcontext:canvaspattern">CanvasPattern</a>? <a href="#dom-context-2d-createpattern-2" id="2dcontext:dom-context-2d-createpattern-2">createPattern</a>(<a href="#canvasimagesource" id="2dcontext:canvasimagesource">CanvasImageSource</a> image, [TreatNullAs=EmptyString] DOMString repetition);

};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasshadowstyles">CanvasShadowStyles</dfn> {
  // shadows
  attribute unrestricted double <a href="#dom-context-2d-shadowoffsetx-2" id="2dcontext:dom-context-2d-shadowoffsetx-2">shadowOffsetX</a>; // (default 0)
  attribute unrestricted double <a href="#dom-context-2d-shadowoffsety-2" id="2dcontext:dom-context-2d-shadowoffsety-2">shadowOffsetY</a>; // (default 0)
  attribute unrestricted double <a href="#dom-context-2d-shadowblur-2" id="2dcontext:dom-context-2d-shadowblur-2">shadowBlur</a>; // (default 0)
  attribute DOMString <a href="#dom-context-2d-shadowcolor-2" id="2dcontext:dom-context-2d-shadowcolor-2">shadowColor</a>; // (default transparent black)
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasfilters">CanvasFilters</dfn> {
  // filters
  attribute DOMString <a href="#dom-context-2d-filter" id="2dcontext:dom-context-2d-filter">filter</a>; // (default &quot;none&quot;)
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasrect">CanvasRect</dfn> {
  // rects
  void <a href="#dom-context-2d-clearrect-2" id="2dcontext:dom-context-2d-clearrect-2">clearRect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void <a href="#dom-context-2d-fillrect-2" id="2dcontext:dom-context-2d-fillrect-2">fillRect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void <a href="#dom-context-2d-strokerect-2" id="2dcontext:dom-context-2d-strokerect-2">strokeRect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasdrawpath">CanvasDrawPath</dfn> {
  // path API (see also <a href="#canvaspath" id="2dcontext:canvaspath-2">CanvasPath</a>)
  void <a href="#dom-context-2d-beginpath-2" id="2dcontext:dom-context-2d-beginpath-2">beginPath</a>();
  void <a href="#dom-context-2d-fill-2" id="2dcontext:dom-context-2d-fill-2">fill</a>(optional <a href="#canvasfillrule" id="2dcontext:canvasfillrule">CanvasFillRule</a> fillRule = &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero-2">nonzero</a>&quot;);
  void <a href="#dom-context-2d-fill-2" id="2dcontext:dom-context-2d-fill-2-2">fill</a>(<a href="#path2d" id="2dcontext:path2d">Path2D</a> path, optional <a href="#canvasfillrule" id="2dcontext:canvasfillrule-2">CanvasFillRule</a> fillRule = &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero-3">nonzero</a>&quot;);
  void <a href="#dom-context-2d-stroke-2" id="2dcontext:dom-context-2d-stroke-2">stroke</a>();
  void <a href="#dom-context-2d-stroke-2" id="2dcontext:dom-context-2d-stroke-2-2">stroke</a>(<a href="#path2d" id="2dcontext:path2d-2">Path2D</a> path);
  void <a href="#dom-context-2d-clip-2" id="2dcontext:dom-context-2d-clip-2">clip</a>(optional <a href="#canvasfillrule" id="2dcontext:canvasfillrule-3">CanvasFillRule</a> fillRule = &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero-4">nonzero</a>&quot;);
  void <a href="#dom-context-2d-clip-2" id="2dcontext:dom-context-2d-clip-2-2">clip</a>(<a href="#path2d" id="2dcontext:path2d-3">Path2D</a> path, optional <a href="#canvasfillrule" id="2dcontext:canvasfillrule-4">CanvasFillRule</a> fillRule = &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero-5">nonzero</a>&quot;);
  void <a href="#dom-context-2d-resetclip-2" id="2dcontext:dom-context-2d-resetclip-2">resetClip</a>();
  boolean <a href="#dom-context-2d-ispointinpath-2" id="2dcontext:dom-context-2d-ispointinpath-2">isPointInPath</a>(unrestricted double x, unrestricted double y, optional <a href="#canvasfillrule" id="2dcontext:canvasfillrule-5">CanvasFillRule</a> fillRule = &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero-6">nonzero</a>&quot;);
  boolean <a href="#dom-context-2d-ispointinpath-2" id="2dcontext:dom-context-2d-ispointinpath-2-2">isPointInPath</a>(<a href="#path2d" id="2dcontext:path2d-4">Path2D</a> path, unrestricted double x, unrestricted double y, optional <a href="#canvasfillrule" id="2dcontext:canvasfillrule-6">CanvasFillRule</a> fillRule = &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero-7">nonzero</a>&quot;);
  boolean <a href="#dom-context-2d-ispointinstroke-2" id="2dcontext:dom-context-2d-ispointinstroke-2">isPointInStroke</a>(unrestricted double x, unrestricted double y);
  boolean <a href="#dom-context-2d-ispointinstroke-2" id="2dcontext:dom-context-2d-ispointinstroke-2-2">isPointInStroke</a>(<a href="#path2d" id="2dcontext:path2d-5">Path2D</a> path, unrestricted double x, unrestricted double y);
};

[Exposed=Window,
 NoInterfaceObject]
interface <dfn id="canvasuserinterface">CanvasUserInterface</dfn> {
  void <a href="#dom-context-2d-drawfocusifneeded-2" id="2dcontext:dom-context-2d-drawfocusifneeded-2">drawFocusIfNeeded</a>(<a data-x-internal="element" href="https://dom.spec.whatwg.org/#interface-element" id="2dcontext:element">Element</a> element);
  void <a href="#dom-context-2d-drawfocusifneeded-2" id="2dcontext:dom-context-2d-drawfocusifneeded-2-2">drawFocusIfNeeded</a>(<a href="#path2d" id="2dcontext:path2d-6">Path2D</a> path, <a data-x-internal="element" href="https://dom.spec.whatwg.org/#interface-element" id="2dcontext:element-2">Element</a> element);
  void <a href="#dom-context-2d-scrollpathintoview-2" id="2dcontext:dom-context-2d-scrollpathintoview-2">scrollPathIntoView</a>();
  void <a href="#dom-context-2d-scrollpathintoview-2" id="2dcontext:dom-context-2d-scrollpathintoview-2-2">scrollPathIntoView</a>(<a href="#path2d" id="2dcontext:path2d-7">Path2D</a> path);
};

[Exposed=Window,
 NoInterfaceObject]
interface <dfn id="canvastext">CanvasText</dfn> {
  // text (see also the <a href="#canvaspathdrawingstyles" id="2dcontext:canvaspathdrawingstyles-3">CanvasPathDrawingStyles</a> and <a href="#canvastextdrawingstyles" id="2dcontext:canvastextdrawingstyles-3">CanvasTextDrawingStyles</a> interfaces)
  void <a href="#dom-context-2d-filltext-2" id="2dcontext:dom-context-2d-filltext-2">fillText</a>(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  void <a href="#dom-context-2d-stroketext-2" id="2dcontext:dom-context-2d-stroketext-2">strokeText</a>(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  <a href="#textmetrics" id="2dcontext:textmetrics">TextMetrics</a> <a href="#dom-context-2d-measuretext-2" id="2dcontext:dom-context-2d-measuretext-2">measureText</a>(DOMString text);
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasdrawimage">CanvasDrawImage</dfn> {
  // drawing images
  void <a href="#dom-context-2d-drawimage" id="2dcontext:dom-context-2d-drawimage">drawImage</a>(<a href="#canvasimagesource" id="2dcontext:canvasimagesource-2">CanvasImageSource</a> image, unrestricted double dx, unrestricted double dy);
  void <a href="#dom-context-2d-drawimage" id="2dcontext:dom-context-2d-drawimage-2">drawImage</a>(<a href="#canvasimagesource" id="2dcontext:canvasimagesource-3">CanvasImageSource</a> image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
  void <a href="#dom-context-2d-drawimage" id="2dcontext:dom-context-2d-drawimage-3">drawImage</a>(<a href="#canvasimagesource" id="2dcontext:canvasimagesource-4">CanvasImageSource</a> image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvasimagedata">CanvasImageData</dfn> {
  // <a href="#pixel-manipulation" id="2dcontext:pixel-manipulation">pixel manipulation</a>
  <a href="#imagedata" id="2dcontext:imagedata">ImageData</a> <a href="#dom-context-2d-createimagedata-2" id="2dcontext:dom-context-2d-createimagedata-2">createImageData</a>(long sw, long sh);
  <a href="#imagedata" id="2dcontext:imagedata-2">ImageData</a> <a href="#dom-context-2d-createimagedata-2" id="2dcontext:dom-context-2d-createimagedata-2-2">createImageData</a>(<a href="#imagedata" id="2dcontext:imagedata-3">ImageData</a> imagedata);
  <a href="#imagedata" id="2dcontext:imagedata-4">ImageData</a> <a href="#dom-context-2d-getimagedata-2" id="2dcontext:dom-context-2d-getimagedata-2">getImageData</a>(long sx, long sy, long sw, long sh);
  void <a href="#dom-context-2d-putimagedata-2" id="2dcontext:dom-context-2d-putimagedata-2">putImageData</a>(<a href="#imagedata" id="2dcontext:imagedata-5">ImageData</a> imagedata, long dx, long dy);
  void <a href="#dom-context-2d-putimagedata-2" id="2dcontext:dom-context-2d-putimagedata-2-2">putImageData</a>(<a href="#imagedata" id="2dcontext:imagedata-6">ImageData</a> imagedata, long dx, long dy, long dirtyX, long dirtyY, long dirtyWidth, long dirtyHeight);
};

enum <dfn id="canvaslinecap">CanvasLineCap</dfn> { &quot;butt&quot;, &quot;round&quot;, &quot;square&quot; };
enum <dfn id="canvaslinejoin">CanvasLineJoin</dfn> { &quot;round&quot;, &quot;bevel&quot;, &quot;miter&quot; };
enum <dfn id="canvastextalign">CanvasTextAlign</dfn> { &quot;<a href="#dom-context-2d-textalign-start" id="2dcontext:dom-context-2d-textalign-start">start</a>&quot;, &quot;<a href="#dom-context-2d-textalign-end" id="2dcontext:dom-context-2d-textalign-end">end</a>&quot;, &quot;<a href="#dom-context-2d-textalign-left" id="2dcontext:dom-context-2d-textalign-left">left</a>&quot;, &quot;<a href="#dom-context-2d-textalign-right" id="2dcontext:dom-context-2d-textalign-right">right</a>&quot;, &quot;<a href="#dom-context-2d-textalign-center" id="2dcontext:dom-context-2d-textalign-center">center</a>&quot; };
enum <dfn id="canvastextbaseline">CanvasTextBaseline</dfn> { &quot;<a href="#dom-context-2d-textbaseline-top" id="2dcontext:dom-context-2d-textbaseline-top">top</a>&quot;, &quot;<a href="#dom-context-2d-textbaseline-hanging" id="2dcontext:dom-context-2d-textbaseline-hanging">hanging</a>&quot;, &quot;<a href="#dom-context-2d-textbaseline-middle" id="2dcontext:dom-context-2d-textbaseline-middle">middle</a>&quot;, &quot;<a href="#dom-context-2d-textbaseline-alphabetic" id="2dcontext:dom-context-2d-textbaseline-alphabetic">alphabetic</a>&quot;, &quot;<a href="#dom-context-2d-textbaseline-ideographic" id="2dcontext:dom-context-2d-textbaseline-ideographic">ideographic</a>&quot;, &quot;<a href="#dom-context-2d-textbaseline-bottom" id="2dcontext:dom-context-2d-textbaseline-bottom">bottom</a>&quot; };
enum <dfn id="canvasdirection">CanvasDirection</dfn> { &quot;<a href="#dom-context-2d-direction-ltr" id="2dcontext:dom-context-2d-direction-ltr">ltr</a>&quot;, &quot;<a href="#dom-context-2d-direction-rtl" id="2dcontext:dom-context-2d-direction-rtl">rtl</a>&quot;, &quot;<a href="#dom-context-2d-direction-inherit" id="2dcontext:dom-context-2d-direction-inherit">inherit</a>&quot; };

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvaspathdrawingstyles">CanvasPathDrawingStyles</dfn> {
  // line caps/joins
  attribute unrestricted double <a href="#dom-context-2d-linewidth-2" id="2dcontext:dom-context-2d-linewidth-2">lineWidth</a>; // (default 1)
  attribute <a href="#canvaslinecap" id="2dcontext:canvaslinecap">CanvasLineCap</a> <a href="#dom-context-2d-linecap-2" id="2dcontext:dom-context-2d-linecap-2">lineCap</a>; // (default &quot;butt&quot;)
  attribute <a href="#canvaslinejoin" id="2dcontext:canvaslinejoin">CanvasLineJoin</a> <a href="#dom-context-2d-linejoin-2" id="2dcontext:dom-context-2d-linejoin-2">lineJoin</a>; // (default &quot;miter&quot;)
  attribute unrestricted double <a href="#dom-context-2d-miterlimit-2" id="2dcontext:dom-context-2d-miterlimit-2">miterLimit</a>; // (default 10)

  // dashed lines
  void <a href="#dom-context-2d-setlinedash-2" id="2dcontext:dom-context-2d-setlinedash-2">setLineDash</a>(sequence&lt;unrestricted double&gt; segments); // default empty
  sequence&lt;unrestricted double&gt; <a href="#dom-context-2d-getlinedash-2" id="2dcontext:dom-context-2d-getlinedash-2">getLineDash</a>();
  attribute unrestricted double <a href="#dom-context-2d-linedashoffset-2" id="2dcontext:dom-context-2d-linedashoffset-2">lineDashOffset</a>;
};

[Exposed=Window,
 NoInterfaceObject]
interface <dfn id="canvastextdrawingstyles">CanvasTextDrawingStyles</dfn> {
  // text
  attribute DOMString <a href="#dom-context-2d-font-2" id="2dcontext:dom-context-2d-font-2">font</a>; // (default 10px sans-serif)
  attribute <a href="#canvastextalign" id="2dcontext:canvastextalign">CanvasTextAlign</a> <a href="#dom-context-2d-textalign-2" id="2dcontext:dom-context-2d-textalign-2">textAlign</a>; // (default: &quot;start&quot;)
  attribute <a href="#canvastextbaseline" id="2dcontext:canvastextbaseline">CanvasTextBaseline</a> <a href="#dom-context-2d-textbaseline-2" id="2dcontext:dom-context-2d-textbaseline-2">textBaseline</a>; // (default: &quot;alphabetic&quot;)
  attribute <a href="#canvasdirection" id="2dcontext:canvasdirection">CanvasDirection</a> <a href="#dom-context-2d-direction-2" id="2dcontext:dom-context-2d-direction-2">direction</a>; // (default: &quot;inherit&quot;)
};

[NoInterfaceObject, Exposed=(Window,Worker)]
interface <dfn id="canvaspath">CanvasPath</dfn> {
  // shared path API methods
  void <a href="#dom-context-2d-closepath-2" id="2dcontext:dom-context-2d-closepath-2">closePath</a>();
  void <a href="#dom-context-2d-moveto-2" id="2dcontext:dom-context-2d-moveto-2">moveTo</a>(unrestricted double x, unrestricted double y);
  void <a href="#dom-context-2d-lineto-2" id="2dcontext:dom-context-2d-lineto-2">lineTo</a>(unrestricted double x, unrestricted double y);
  void <a href="#dom-context-2d-quadraticcurveto-2" id="2dcontext:dom-context-2d-quadraticcurveto-2">quadraticCurveTo</a>(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y);
  void <a href="#dom-context-2d-beziercurveto-2" id="2dcontext:dom-context-2d-beziercurveto-2">bezierCurveTo</a>(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y);
  void <a href="#dom-context-2d-arcto-2" id="2dcontext:dom-context-2d-arcto-2">arcTo</a>(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius); 
  void <a href="#dom-context-2d-arcto-2" id="2dcontext:dom-context-2d-arcto-2-2">arcTo</a>(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation); 
  void <a href="#dom-context-2d-rect-2" id="2dcontext:dom-context-2d-rect-2">rect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void <a href="#dom-context-2d-arc-2" id="2dcontext:dom-context-2d-arc-2">arc</a>(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false); 
  void <a href="#dom-context-2d-ellipse-2" id="2dcontext:dom-context-2d-ellipse-2">ellipse</a>(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false); 
};

[Exposed=(Window,Worker)]
interface <dfn id="canvasgradient">CanvasGradient</dfn> {
  // opaque object
  void <a href="#dom-canvasgradient-addcolorstop-2" id="2dcontext:dom-canvasgradient-addcolorstop-2">addColorStop</a>(double offset, DOMString color);
};

[Exposed=(Window,Worker)]
interface <dfn id="canvaspattern">CanvasPattern</dfn> {
  // opaque object
  void <a href="#dom-canvaspattern-settransform-2" id="2dcontext:dom-canvaspattern-settransform-2">setTransform</a>(optional <a data-x-internal="dommatrix2dinit" href="https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit" id="2dcontext:dommatrix2dinit-2">DOMMatrix2DInit</a> transform);
};

[Exposed=Window]
interface <dfn id="textmetrics">TextMetrics</dfn> {
  // x-direction
  readonly attribute double <a href="#dom-textmetrics-width-2" id="2dcontext:dom-textmetrics-width-2">width</a>; // advance width
  readonly attribute double <a href="#dom-textmetrics-actualboundingboxleft-2" id="2dcontext:dom-textmetrics-actualboundingboxleft-2">actualBoundingBoxLeft</a>;
  readonly attribute double <a href="#dom-textmetrics-actualboundingboxright-2" id="2dcontext:dom-textmetrics-actualboundingboxright-2">actualBoundingBoxRight</a>;

  // y-direction
  readonly attribute double <a href="#dom-textmetrics-fontboundingboxascent-2" id="2dcontext:dom-textmetrics-fontboundingboxascent-2">fontBoundingBoxAscent</a>;
  readonly attribute double <a href="#dom-textmetrics-fontboundingboxdescent-2" id="2dcontext:dom-textmetrics-fontboundingboxdescent-2">fontBoundingBoxDescent</a>;
  readonly attribute double <a href="#dom-textmetrics-actualboundingboxascent-2" id="2dcontext:dom-textmetrics-actualboundingboxascent-2">actualBoundingBoxAscent</a>;
  readonly attribute double <a href="#dom-textmetrics-actualboundingboxdescent-2" id="2dcontext:dom-textmetrics-actualboundingboxdescent-2">actualBoundingBoxDescent</a>;
  readonly attribute double <a href="#dom-textmetrics-emheightascent-2" id="2dcontext:dom-textmetrics-emheightascent-2">emHeightAscent</a>;
  readonly attribute double <a href="#dom-textmetrics-emheightdescent-2" id="2dcontext:dom-textmetrics-emheightdescent-2">emHeightDescent</a>;
  readonly attribute double <a href="#dom-textmetrics-hangingbaseline-2" id="2dcontext:dom-textmetrics-hangingbaseline-2">hangingBaseline</a>;
  readonly attribute double <a href="#dom-textmetrics-alphabeticbaseline-2" id="2dcontext:dom-textmetrics-alphabeticbaseline-2">alphabeticBaseline</a>;
  readonly attribute double <a href="#dom-textmetrics-ideographicbaseline-2" id="2dcontext:dom-textmetrics-ideographicbaseline-2">ideographicBaseline</a>;
};

[<a href="#dom-imagedata" id="2dcontext:dom-imagedata">Constructor</a>(unsigned long sw, unsigned long sh),
 <a href="#dom-imagedata" id="2dcontext:dom-imagedata-2">Constructor</a>(<a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray" id="2dcontext:idl-uint8clampedarray">Uint8ClampedArray</a> data, unsigned long sw, optional unsigned long sh),
 Exposed=(Window,Worker),
 <a href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="2dcontext:serializable">Serializable</a>]
interface <dfn id="imagedata">ImageData</dfn> {
  readonly attribute unsigned long <a href="#dom-imagedata-width-2" id="2dcontext:dom-imagedata-width-2">width</a>;
  readonly attribute unsigned long <a href="#dom-imagedata-height-2" id="2dcontext:dom-imagedata-height-2">height</a>;
  readonly attribute <a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray" id="2dcontext:idl-uint8clampedarray-2">Uint8ClampedArray</a> <a href="#dom-imagedata-data-2" id="2dcontext:dom-imagedata-data-2">data</a>;
};

[<a href="#dom-path2d" id="2dcontext:dom-path2d">Constructor</a>,
 <a href="#dom-path2d-copy" id="2dcontext:dom-path2d-copy">Constructor</a>(<a href="#path2d" id="2dcontext:path2d-8">Path2D</a> path),
 <a href="#dom-path2d-merge" id="2dcontext:dom-path2d-merge">Constructor</a>(sequence&lt;<a href="#path2d" id="2dcontext:path2d-9">Path2D</a>&gt; paths, optional <a href="#canvasfillrule" id="2dcontext:canvasfillrule-7">CanvasFillRule</a> fillRule = &quot;<a href="#dom-context-2d-fillrule-nonzero" id="2dcontext:dom-context-2d-fillrule-nonzero-8">nonzero</a>&quot;),
 <a href="#dom-path2d-withdata" id="2dcontext:dom-path2d-withdata">Constructor</a>(DOMString d),
 Exposed=(Window,Worker)]
interface <dfn id="path2d">Path2D</dfn> {
  void <a href="#dom-path2d-addpath-2" id="2dcontext:dom-path2d-addpath-2">addPath</a>(<a href="#path2d" id="2dcontext:path2d-10">Path2D</a> path, optional <a data-x-internal="dommatrix2dinit" href="https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit" id="2dcontext:dommatrix2dinit-3">DOMMatrix2DInit</a> transform);
};
<a href="#path2d" id="2dcontext:path2d-11">Path2D</a> implements <a href="#canvaspath" id="2dcontext:canvaspath-3">CanvasPath</a>;</pre>

 
  <p class="note">To maintain compatibility with existing Web content, user agents need to
  enumerate methods defined in <code id="2dcontext:canvasuserinterface-2"><a href="#canvasuserinterface">CanvasUserInterface</a></code> immediately after the <code id="2dcontext:dom-context-2d-stroke-2-3"><a href="#dom-context-2d-stroke-2">stroke()</a></code> method on <code id="2dcontext:canvasrenderingcontext2d-17"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>
  objects.</p>

  <dl class="domintro"><dt><var>context</var> = <var>canvas</var> . <code id="2dcontext:dom-canvas-getcontext-2"><a href="#dom-canvas-getcontext-2">getContext</a></code>('2d' [, { [ <code id="2dcontext:dom-canvasrenderingcontext2dsettings-alpha-2"><a href="#dom-canvasrenderingcontext2dsettings-alpha">alpha</a></code>: false ] } ] )</dt><dd>

    <p>Returns a <code id="2dcontext:canvasrenderingcontext2d-18"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object that is permanently bound to a
    particular <code id="2dcontext:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element.</p>

    <p>If the <code id="2dcontext:dom-canvasrenderingcontext2dsettings-alpha-3"><a href="#dom-canvasrenderingcontext2dsettings-alpha">alpha</a></code> setting is
    provided and set to false, then the canvas is forced to always be opaque.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-canvas"><a href="#dom-context-2d-canvas-2">canvas</a></code></dt><dd>

    <p>Returns the <code id="2dcontext:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> element.</p>

   </dd></dl>

  
  <p>A <code id="2dcontext:canvasrenderingcontext2d-19"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object has an <dfn id="output-bitmap">output bitmap</dfn> that
  is initialized when the object is created.</p>


  <p>The <a href="#output-bitmap" id="2dcontext:output-bitmap">output bitmap</a> has an <a href="#concept-canvas-origin-clean" id="2dcontext:concept-canvas-origin-clean">origin-clean</a> flag, which can be set to true or false.
  Initially, when one of these bitmaps is created, its <a href="#concept-canvas-origin-clean" id="2dcontext:concept-canvas-origin-clean-2">origin-clean</a> flag must be set to true.</p>


  <p>The <code id="2dcontext:canvasrenderingcontext2d-20"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object also has an <dfn id="concept-canvas-alpha">alpha</dfn> flag, which can be set to true or false. Initially,
  when the context is created, its <a href="#concept-canvas-alpha" id="2dcontext:concept-canvas-alpha">alpha</a> flag must be
  set to true. When a <code id="2dcontext:canvasrenderingcontext2d-21"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object has its <a href="#concept-canvas-alpha" id="2dcontext:concept-canvas-alpha-2">alpha</a> flag set to false, then its alpha channel must be
  fixed to 1.0 (fully opaque) for all pixels, and attempts to change the alpha component of any
  pixel must be silently ignored.</p>

  <p class="note">Thus, the bitmap of such a context starts off as fully-opaque black instead of
  fully-transparent black; <code id="2dcontext:dom-context-2d-clearrect-2-2"><a href="#dom-context-2d-clearrect-2">clearRect()</a></code> always
  results in fully-opaque black pixels, every fourth byte from <code id="2dcontext:dom-context-2d-getimagedata-2-2"><a href="#dom-context-2d-getimagedata-2">getImageData()</a></code> is always 255, the <code id="2dcontext:dom-context-2d-putimagedata-2-3"><a href="#dom-context-2d-putimagedata-2">putImageData()</a></code> method effectively ignores every
  fourth byte in its input, and so on. However, the alpha component of styles and images drawn
  onto the canvas are still honoured up to the point where they would impact the <a href="#output-bitmap" id="2dcontext:output-bitmap-2">output
  bitmap</a>'s alpha channel; for instance, drawing a 50% transparent white square on a freshly
  created <a href="#output-bitmap" id="2dcontext:output-bitmap-3">output bitmap</a> with its <a href="#concept-canvas-alpha" id="2dcontext:concept-canvas-alpha-3">alpha</a>
  flag set to false will result in a fully-opaque gray square.</p>

  <hr/>

  <p>The <code id="2dcontext:canvasrenderingcontext2d-22"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> 2D rendering context represents a flat linear
  Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having
  <var>x</var> values increasing when going right, and <var>y</var> values increasing when going
  down. The <var>x</var>-coordinate of the right-most edge is equal to the width of the rendering
  context's <a href="#output-bitmap" id="2dcontext:output-bitmap-4">output bitmap</a> in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="2dcontext:'px'">CSS pixels</a>; similarly, the
  <var>y</var>-coordinate of the bottom-most edge is equal to the height of the rendering context's
  <a href="#output-bitmap" id="2dcontext:output-bitmap-5">output bitmap</a> in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="2dcontext:'px'-2">CSS pixels</a>.</p>

  <p>The size of the coordinate space does not necessarily represent the size of the actual bitmaps
  that the user agent will use internally or during rendering. On high-definition displays, for
  instance, the user agent may internally use bitmaps with two device pixels per unit in the
  coordinate space, so that the rendering remains at high quality throughout. Anti-aliasing can
  similarly be implemented using over-sampling with bitmaps of a higher resolution than the final
  image on the display.</p>

  <hr/>

  <p>The <dfn id="2d-context-creation-algorithm">2D context creation algorithm</dfn>, which is passed a <var>target</var> (a
  <code id="2dcontext:the-canvas-element-3"><a href="#the-canvas-element">canvas</a></code> element) and optionally some arguments, consists of running the following
  steps:</p>

  <ol><li><p>If the algorithm was passed some arguments, then let <var>arg</var> be the first such
   argument. Otherwise, let <var>arg</var> be undefined.</p></li><li><p>Let <var>settings</var> be the result of <a href="#coerce-context-arguments-for-2d" id="2dcontext:coerce-context-arguments-for-2d">coercing the <var>arg</var> context arguments for 2D</a>.</p></li><li><p>Create a new <code id="2dcontext:canvasrenderingcontext2d-23"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object.</p></li><li><p>Initialize its <code id="2dcontext:dom-context-2d-canvas-2-2"><a href="#dom-context-2d-canvas-2">canvas</a></code> attribute to point to
   <var>target</var>.</p></li><li><p>Let the new <code id="2dcontext:canvasrenderingcontext2d-24"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object's <a href="#output-bitmap" id="2dcontext:output-bitmap-6">output bitmap</a> be
   the same bitmap as <var>target</var>'s bitmap (so that they are shared).</p></li><li><p><a href="#concept-canvas-set-bitmap-dimensions" id="2dcontext:concept-canvas-set-bitmap-dimensions">Set bitmap dimensions</a> to the
   numeric values of <var>target</var>'s <code id="2dcontext:attr-canvas-width"><a href="#attr-canvas-width">width</a></code> and
   <code id="2dcontext:attr-canvas-height"><a href="#attr-canvas-height">height</a></code> content attributes.</p></li><li>

    <p>Process each of the members of <var>settings</var> as follows:</p>

    <dl><dt><dfn id="dom-canvasrenderingcontext2dsettings-alpha"><code>alpha</code></dfn></dt><dd>If false, then set the new <code id="2dcontext:canvasrenderingcontext2d-25"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object's <a href="#concept-canvas-alpha" id="2dcontext:concept-canvas-alpha-4">alpha</a> flag to false.</dd></dl>

   </li><li><p>Return the new <code id="2dcontext:canvasrenderingcontext2d-26"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object.</p></li></ol>

  <hr/>

  <hr/>

  <p>When a user agent is required to <dfn id="coerce-context-arguments-for-2d">coerce context arguments for 2D</dfn>, it must run these
  steps:</p>

  <ol><li><p>Let <var>input</var> be the argument to coerce.</p></li><li><p>Let <var>jsval</var> be the result of <a data-x-internal="concept-idl-convert" href="https://heycam.github.io/webidl/#es-type-mapping" id="2dcontext:concept-idl-convert">converting</a>
   <var>input</var> to a JavaScript value. (This can throw an exception.)</p></li><li><p>Let <var>dict</var> be the result of <a data-x-internal="concept-idl-convert" href="https://heycam.github.io/webidl/#es-type-mapping" id="2dcontext:concept-idl-convert-2">converting</a>
   <var>jsval</var> to the dictionary type <code id="2dcontext:canvasrenderingcontext2dsettings"><a href="#canvasrenderingcontext2dsettings">CanvasRenderingContext2DSettings</a></code>. (This can
   throw an exception.)</p></li><li><p>Return <var>dict</var>.</p></li></ol>

  <hr/>

  <p>When the user agent is to <dfn id="concept-canvas-set-bitmap-dimensions">set bitmap
  dimensions</dfn> to <var>width</var> and <var>height</var>, it must run these steps:</p>

  <ol><li><p><a href="#reset-the-rendering-context-to-its-default-state" id="2dcontext:reset-the-rendering-context-to-its-default-state">Reset the rendering context to its default state</a>.</p></li><li><p>Resize the <a href="#output-bitmap" id="2dcontext:output-bitmap-7">output bitmap</a> to the new <var>width</var> and <var>height</var>
   and clear it to fully transparent black.</p></li><li><p>Let <var>canvas</var> be the <code id="2dcontext:the-canvas-element-4"><a href="#the-canvas-element">canvas</a></code> element to which the rendering
   context's <code id="2dcontext:dom-context-2d-canvas-2-3"><a href="#dom-context-2d-canvas-2">canvas</a></code> attribute was initialized.</p></li><li><p>If the numeric value of <var>canvas</var>'s <code id="2dcontext:attr-canvas-width-2"><a href="#attr-canvas-width">width</a></code>
   content attribute differs from <var>width</var>, then set <var>canvas</var>'s <code id="2dcontext:attr-canvas-width-3"><a href="#attr-canvas-width">width</a></code> content attribute to the shortest possible string
   representing <var>width</var> as a <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-non-negative-integer" id="2dcontext:valid-non-negative-integer">valid non-negative integer</a>.</p></li><li><p>If the numeric value of <var>canvas</var>'s <code id="2dcontext:attr-canvas-height-2"><a href="#attr-canvas-height">height</a></code>
   content attribute differs from <var>height</var>, then set <var>canvas</var>'s <code id="2dcontext:attr-canvas-height-3"><a href="#attr-canvas-height">height</a></code> content attribute to the shortest possible string
   representing <var>height</var> as a <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-non-negative-integer" id="2dcontext:valid-non-negative-integer-2">valid non-negative integer</a>.</p></li></ol>

  <div class="example">
   <p>Only one square appears to be drawn in the following example:</p>
   <pre>// canvas is a reference to a &lt;canvas&gt; element
var context = canvas.getContext('2d');
context.fillRect(0,0,50,50);
canvas.setAttribute('width', '300'); // clears the canvas
context.fillRect(0,100,50,50);
canvas.width = canvas.width; // clears the canvas
context.fillRect(100,0,50,50); // only this square remains</pre>
  </div>

  <hr/>

  <p>When the user agent is to run the <dfn id="concept-canvas-unbinding-steps">unbinding
  steps</dfn> for a rendering context, it must run these steps:</p>

  <ol><li><p><a href="#reset-the-rendering-context-to-its-default-state" id="2dcontext:reset-the-rendering-context-to-its-default-state-2">Reset the rendering context to its default state</a>.</p></li><li><p>Clear the <code id="2dcontext:canvasrenderingcontext2d-27"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object's <a href="#output-bitmap" id="2dcontext:output-bitmap-8">output bitmap</a> to a
   transparent black.</p></li><li><p>Set the <code id="2dcontext:canvasrenderingcontext2d-28"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object's <a href="#concept-canvas-origin-clean" id="2dcontext:concept-canvas-origin-clean-3">origin-clean</a> flag to true.</p></li><li><p>Let the <code id="2dcontext:canvasrenderingcontext2d-29"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object have no <a href="#output-bitmap" id="2dcontext:output-bitmap-9">output
   bitmap</a>.</p></li></ol>

  <p>When the user agent is to run the <dfn id="concept-canvas-binding-steps">binding
  steps</dfn> to bind the rendering context to the <code id="2dcontext:the-canvas-element-5"><a href="#the-canvas-element">canvas</a></code> element <var>target</var>, it
  must run these steps:</p>

  <ol><li><p><a href="#reset-the-rendering-context-to-its-default-state" id="2dcontext:reset-the-rendering-context-to-its-default-state-3">Reset the rendering context to its default state</a>.</p></li><li><p>Resize the <code id="2dcontext:canvasrenderingcontext2d-30"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object's <a href="#output-bitmap" id="2dcontext:output-bitmap-10">output bitmap</a> to
   the dimensions of <var>target</var>'s bitmap and clear it to fully transparent black.</p></li><li><p>Set the <code id="2dcontext:canvasrenderingcontext2d-31"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object's <a href="#concept-canvas-origin-clean" id="2dcontext:concept-canvas-origin-clean-4">origin-clean</a> flag to true.</p></li><li><p>Let the <code id="2dcontext:canvasrenderingcontext2d-32"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object's <a href="#output-bitmap" id="2dcontext:output-bitmap-11">output bitmap</a> be <var>target</var>'s bitmap.</p></li></ol>

  <hr/>

  <p>The <dfn id="dom-context-2d-canvas-2"><code>canvas</code></dfn> attribute must return the
  value it was initialized to when the object was created.</p>

  <hr/>

  <p id="canvasrenderingcontext2d-currentcolor">Whenever the CSS value <code>currentColor</code> is used as a color in the <code id="2dcontext:canvasrenderingcontext2d-33"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>
  API, the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="2dcontext:computed-value">computed value</a> of the <code>currentColor</code> keyword is
  the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="2dcontext:computed-value-2">computed value</a> of the <a data-x-internal="'color'" href="https://drafts.csswg.org/css-color/#the-color-property" id="2dcontext:'color'">'color'</a> property on the <code id="2dcontext:the-canvas-element-6"><a href="#the-canvas-element">canvas</a></code>
  element 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 <a data-x-internal="'color'" href="https://drafts.csswg.org/css-color/#the-color-property" id="2dcontext:'color'-2">'color'</a> property is undefined for a particular case (e.g. because the element is
  not in a document), then the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="2dcontext:computed-value-3">computed value</a> of the <a data-x-internal="'color'" href="https://drafts.csswg.org/css-color/#the-color-property" id="2dcontext:'color'-3">'color'</a> property
  for the purposes of determining the computed value of the <code>currentColor</code>
  keyword is fully opaque black. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSSCOLOR">[CSSCOLOR]</a></p>

  <p>In the case of <code id="2dcontext:dom-canvasgradient-addcolorstop-2-2"><a href="#dom-canvasgradient-addcolorstop-2">addColorStop()</a></code> on
  <code id="2dcontext:canvasgradient-3"><a href="#canvasgradient">CanvasGradient</a></code>, the &quot;<a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="2dcontext:computed-value-4">computed value</a> of the <a data-x-internal="'color'" href="https://drafts.csswg.org/css-color/#the-color-property" id="2dcontext:'color'-4">'color'</a>
  property&quot; for the purposes of determining the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="2dcontext:computed-value-5">computed value</a> of the <code>currentColor</code> keyword is always fully opaque black (there is no associated
  element). <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSSCOLOR">[CSSCOLOR]</a></p>

  <p class="note">This is because <code id="2dcontext:canvasgradient-4"><a href="#canvasgradient">CanvasGradient</a></code> objects are
  <code id="2dcontext:the-canvas-element-7"><a href="#the-canvas-element">canvas</a></code>-neutral — a <code id="2dcontext:canvasgradient-5"><a href="#canvasgradient">CanvasGradient</a></code> object created by one
  <code id="2dcontext:the-canvas-element-8"><a href="#the-canvas-element">canvas</a></code> can be used by another, and there is therefore no way to know which is the
  &quot;element in question&quot; at the time that the color is specified.</p>

  <p class="note">Similar concerns exist with font-related properties; the rules for those are
  described in detail in the relevant section below.</p>

  
  <hr/>

  <p>The <code id="2dcontext:canvasfillrule-8"><a href="#canvasfillrule">CanvasFillRule</a></code> enumeration is used to select the <dfn id="fill-rule">fill rule</dfn>
  algorithm by which to determine if a point is inside or outside a path.</p>

  <p>The value &quot;<dfn id="dom-context-2d-fillrule-nonzero"><code>nonzero</code></dfn>&quot; value
  indicates the non-zero winding rule, wherein

     a point is considered to be outside a shape if the number of times a half-infinite straight
     line drawn from that point crosses the shape's path going in one direction is equal to the
     number of times it crosses the path going in the other direction.

  </p>


  <p>The &quot;<dfn id="dom-context-2d-fillrule-evenodd"><code>evenodd</code></dfn>&quot; value indicates
  the even-odd rule, wherein

     a point is considered to be outside a shape if the number of times a half-infinite straight
     line drawn from that point crosses the shape's path is even.

  </p>

  <p>If a point is not outside a shape, it is inside the shape.</p>


  <hr/>

  <p>The <code id="2dcontext:imagesmoothingquality-2"><a href="#imagesmoothingquality">ImageSmoothingQuality</a></code> enumeration is used to express a preference for the
  interpolation quality to use when smoothing images.</p>

  <p>The &quot;<dfn id="dom-context-2d-imagesmoothingquality-low"><code>low</code></dfn>&quot; value
  indicates a preference for a low level of image interpolation quality. Low-quality image
  interpolation may be more computationally efficient than higher settings.</p>

  <p>The &quot;<dfn id="dom-context-2d-imagesmoothingquality-medium"><code>medium</code></dfn>&quot; value
  indicates a preference for a medium level of image interpolation quality.</p>

  <p>The &quot;<dfn id="dom-context-2d-imagesmoothingquality-high"><code>high</code></dfn>&quot; value
  indicates a preference for a high level of image interpolation quality. High-quality image
  interpolation may be more computationally expensive than lower settings.</p>

  <p class="note">Bilinear scaling is an example of a relatively fast, lower-quality image-smoothing
  algorithm. Bicubic or Lanczos scaling are examples of image-smoothing algorithms that produce
  higher-quality output. This specification does not mandate that specific interpolation algorithms
  be used.</p>


  <h6 id="implementation-notes"><span class="secno">4.12.5.1.1</span> Implementation notes<a class="self-link" href="#implementation-notes"/></h6>

  <p><i>This section is non-normative.</i></p>

  <p>The <a href="#output-bitmap" id="implementation-notes:output-bitmap">output bitmap</a>, when it is not directly displayed by the user agent,
  implementations can, instead of updating this bitmap, merely remember the sequence of drawing
  operations that have been applied to it until such time as the bitmap's actual data is needed
  (for example because of a call to <code id="implementation-notes:dom-context-2d-drawimage"><a href="#dom-context-2d-drawimage">drawImage()</a></code>, or
  the <code id="implementation-notes:dom-createimagebitmap-2"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap-2">createImageBitmap()</a></code> factory method). In many
  cases, this will be more memory efficient.</p>

  <p>The bitmap of a <code id="implementation-notes:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element is the one bitmap that's pretty much always going
  to be needed in practice. The <a href="#output-bitmap" id="implementation-notes:output-bitmap-2">output bitmap</a> of a rendering context, when it has one,
  is always just an alias to a <code id="implementation-notes:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> element's bitmap.</p>

  <p>Additional bitmaps are sometimes needed, e.g. to enable fast drawing when the canvas is being
  painted at a different size than its <a data-x-internal="intrinsic-dimensions" href="https://drafts.csswg.org/css2/conform.html#intrinsic" id="implementation-notes:intrinsic-dimensions">intrinsic size</a>,
  or to enable double buffering so that graphics updates, like page scrolling for example, can be
  processed concurrently while canvas draw commands are being executed.</p>

  <h6 id="the-canvas-state"><span class="secno">4.12.5.1.2</span> The canvas state<a class="self-link" href="#the-canvas-state"/></h6>

  <p>Objects that implement the <code id="the-canvas-state:canvasstate"><a href="#canvasstate">CanvasState</a></code> interface maintain a stack of drawing
  states. <dfn id="drawing-state">Drawing states</dfn> consist of:</p>

  <ul class="brief"><li>The current <a href="#transformations" id="the-canvas-state:transformations">transformation matrix</a>.</li><li>The current <a href="#clipping-region" id="the-canvas-state:clipping-region">clipping region</a>.</li><li>The current values of the following attributes: <code id="the-canvas-state:dom-context-2d-strokestyle-2"><a href="#dom-context-2d-strokestyle-2">strokeStyle</a></code>, <code id="the-canvas-state:dom-context-2d-fillstyle-2"><a href="#dom-context-2d-fillstyle-2">fillStyle</a></code>, <code id="the-canvas-state:dom-context-2d-globalalpha-2"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code>, <code id="the-canvas-state:dom-context-2d-linewidth-2"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code>, <code id="the-canvas-state:dom-context-2d-linecap-2"><a href="#dom-context-2d-linecap-2">lineCap</a></code>, <code id="the-canvas-state:dom-context-2d-linejoin-2"><a href="#dom-context-2d-linejoin-2">lineJoin</a></code>, <code id="the-canvas-state:dom-context-2d-miterlimit-2"><a href="#dom-context-2d-miterlimit-2">miterLimit</a></code>, <code id="the-canvas-state:dom-context-2d-linedashoffset-2"><a href="#dom-context-2d-linedashoffset-2">lineDashOffset</a></code>, <code id="the-canvas-state:dom-context-2d-shadowoffsetx-2"><a href="#dom-context-2d-shadowoffsetx-2">shadowOffsetX</a></code>, <code id="the-canvas-state:dom-context-2d-shadowoffsety-2"><a href="#dom-context-2d-shadowoffsety-2">shadowOffsetY</a></code>, <code id="the-canvas-state:dom-context-2d-shadowblur-2"><a href="#dom-context-2d-shadowblur-2">shadowBlur</a></code>, <code id="the-canvas-state:dom-context-2d-shadowcolor-2"><a href="#dom-context-2d-shadowcolor-2">shadowColor</a></code>, <code id="the-canvas-state:dom-context-2d-filter"><a href="#dom-context-2d-filter">filter</a></code>, <code id="the-canvas-state:dom-context-2d-globalcompositeoperation-2"><a href="#dom-context-2d-globalcompositeoperation-2">globalCompositeOperation</a></code>, <code id="the-canvas-state:dom-context-2d-font-2"><a href="#dom-context-2d-font-2">font</a></code>, <code id="the-canvas-state:dom-context-2d-textalign-2"><a href="#dom-context-2d-textalign-2">textAlign</a></code>, <code id="the-canvas-state:dom-context-2d-textbaseline-2"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code>, <code id="the-canvas-state:dom-context-2d-direction-2"><a href="#dom-context-2d-direction-2">direction</a></code>, <code id="the-canvas-state:dom-context-2d-imagesmoothingenabled-2"><a href="#dom-context-2d-imagesmoothingenabled-2">imageSmoothingEnabled</a></code>, <code id="the-canvas-state:dom-context-2d-imagesmoothingquality-2"><a href="#dom-context-2d-imagesmoothingquality-2">imageSmoothingQuality</a></code>.</li><li>The current <a href="#dash-list" id="the-canvas-state:dash-list">dash list</a>.</li></ul>

  <p class="note">The <a href="#current-default-path" id="the-canvas-state:current-default-path">current default path</a> and the rendering context's bitmaps are not
  part of the drawing state. The <a href="#current-default-path" id="the-canvas-state:current-default-path-2">current default path</a> is persistent, and can only be
  reset using the <code id="the-canvas-state:dom-context-2d-beginpath-2"><a href="#dom-context-2d-beginpath-2">beginPath()</a></code> method. The bitmaps
  depend on whether and how the rendering context is bound to a <code id="the-canvas-state:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element.</p>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-save"><a href="#dom-context-2d-save-2">save</a></code>()</dt><dd>

    <p>Pushes the current state onto the stack.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-restore"><a href="#dom-context-2d-restore-2">restore</a></code>()</dt><dd>

    <p>Pops the top state on the stack, restoring the context to that state.</p>

   </dd></dl>

  
  <p>The <dfn id="dom-context-2d-save-2"><code>save()</code></dfn> method, when invoked, must push
  a copy of the current drawing state onto the drawing state stack.</p>

  <p>The <dfn id="dom-context-2d-restore-2"><code>restore()</code></dfn> method, when invoked,
  must pop the top entry in the drawing state stack, and reset the drawing state it describes. If
  there is no saved state, then the method must do nothing.</p>

  <p>When the user agent is to <dfn id="reset-the-rendering-context-to-its-default-state">reset the rendering context to its default state</dfn>, it must
  clear the drawing state stack and everything that <a href="#drawing-state" id="the-canvas-state:drawing-state">drawing state</a> consists of to
  initial values.</p>

  
  <h6 id="line-styles"><span class="secno">4.12.5.1.3</span> Line styles<a class="self-link" href="#line-styles"/></h6>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-linewidth"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="line-styles:dom-context-2d-linewidth-2"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code> [ = <var>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>context</var> . <code id="dom-context-2d-linecap"><a href="#dom-context-2d-linecap-2">lineCap</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="line-styles:dom-context-2d-linecap-2"><a href="#dom-context-2d-linecap-2">lineCap</a></code> [ = <var>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 &quot;<code>butt</code>&quot;, &quot;<code>round</code>&quot;, and &quot;<code>square</code>&quot;. Other values are ignored.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-linejoin"><a href="#dom-context-2d-linejoin-2">lineJoin</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="line-styles:dom-context-2d-linejoin-2"><a href="#dom-context-2d-linejoin-2">lineJoin</a></code> [ = <var>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 &quot;<code>bevel</code>&quot;, &quot;<code>round</code>&quot;, and &quot;<code>miter</code>&quot;. Other values are ignored.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-miterlimit"><a href="#dom-context-2d-miterlimit-2">miterLimit</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="line-styles:dom-context-2d-miterlimit-2"><a href="#dom-context-2d-miterlimit-2">miterLimit</a></code> [ = <var>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><dt><var>context</var> . <code id="dom-context-2d-setlinedash"><a href="#dom-context-2d-setlinedash-2">setLineDash</a></code>(<var>segments</var>)</dt><dt><var>styles</var> . <code id="line-styles:dom-context-2d-setlinedash-2"><a href="#dom-context-2d-setlinedash-2">setLineDash</a></code>(<var>segments</var>)</dt><dd>

    <p>Sets the current line dash pattern (as used when stroking). The argument is a list of
    distances for which to alternately have the line on and the line off.</p>

   </dd><dt><var>segments</var> = <var>context</var> . <code id="dom-context-2d-getlinedash"><a href="#dom-context-2d-getlinedash-2">getLineDash</a></code>()</dt><dt><var>segments</var> = <var>styles</var> . <code id="line-styles:dom-context-2d-getlinedash-2"><a href="#dom-context-2d-getlinedash-2">getLineDash</a></code>()</dt><dd>

    <p>Returns a copy of the current line dash pattern. The array returned will always have an even
    number of entries (i.e. the pattern is normalized).</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-linedashoffset"><a href="#dom-context-2d-linedashoffset-2">lineDashOffset</a></code></dt><dt><var>styles</var> . <code id="line-styles:dom-context-2d-linedashoffset-2"><a href="#dom-context-2d-linedashoffset-2">lineDashOffset</a></code></dt><dd>

    <p>Returns the phase offset (in the same units as the line dash pattern).</p>

    <p>Can be set, to change the phase offset. Values that are not finite values are ignored.</p>

   </dd></dl>

  
  <p>Objects that implement the <code id="line-styles:canvaspathdrawingstyles"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface have attributes and
  methods (defined in this section) that control how lines are treated by the object.</p>

  <p>The <dfn id="dom-context-2d-linewidth-2"><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 object implementing the <code id="line-styles:canvaspathdrawingstyles-2"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface is created, the
  <code id="line-styles:dom-context-2d-linewidth-2-2"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code> attribute must initially have the value
  1.0.</p>

  <hr/>

  <p>The <dfn id="dom-context-2d-linecap-2"><code>lineCap</code></dfn> attribute defines the type
  of endings that UAs will place on the end of lines. The three valid values are &quot;<code>butt</code>&quot;, &quot;<code>round</code>&quot;, and &quot;<code>square</code>&quot;.</p>

  <p>On getting, it must return the current value. On setting, the current value must be changed
  to the new value.</p>

  <p>When the object implementing the <code id="line-styles:canvaspathdrawingstyles-3"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface is created, the
  <code id="line-styles:dom-context-2d-linecap-2-2"><a href="#dom-context-2d-linecap-2">lineCap</a></code> attribute must initially have the value
  &quot;<code>butt</code>&quot;.</p>

  <hr/>

  <p>The <dfn id="dom-context-2d-linejoin-2"><code>lineJoin</code></dfn> attribute defines the type
  of corners that UAs will place where two lines meet. The three valid values are
  &quot;<code>bevel</code>&quot;, &quot;<code>round</code>&quot;, and &quot;<code>miter</code>&quot;.</p>

  <p>On getting, it must return the current value. On setting, the current value must be changed
  to the new value.</p>

  <p>When the object implementing the <code id="line-styles:canvaspathdrawingstyles-4"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface is created, the
  <code id="line-styles:dom-context-2d-linejoin-2-2"><a href="#dom-context-2d-linejoin-2">lineJoin</a></code> attribute must initially have the value
  &quot;<code>miter</code>&quot;.</p>

  <hr/>

  <p>When the <code id="line-styles:dom-context-2d-linejoin-2-3"><a href="#dom-context-2d-linejoin-2">lineJoin</a></code> attribute has the value &quot;<code>miter</code>&quot;, strokes use the miter limit ratio to decide how to render joins. The
  miter limit ratio can be explicitly set using the <dfn id="dom-context-2d-miterlimit-2"><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 object implementing the <code id="line-styles:canvaspathdrawingstyles-5"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface is created, the
  <code id="line-styles:dom-context-2d-miterlimit-2-2"><a href="#dom-context-2d-miterlimit-2">miterLimit</a></code> attribute must initially have the value
  10.0.</p>

  <hr/>

  <p>Each <code id="line-styles:canvaspathdrawingstyles-6"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> object has a <dfn id="dash-list">dash list</dfn>, which is either
  empty or consists of an even number of non-negative numbers. Initially, the <a href="#dash-list" id="line-styles:dash-list">dash list</a>
  must be empty.</p>

  <p>The <dfn id="dom-context-2d-setlinedash-2"><code>setLineDash()</code></dfn> method, when
  invoked, must run these steps:</p>

  <ol><li><p>Let <var>a</var> be the argument.</p></li><li><p>If any value in <var>a</var> is not finite (e.g. an Infinity or a NaN value), or
   if any value is negative (less than zero), then abort these steps (without throwing an exception;
   user agents could show a message on a developer console, though, as that would be helpful for
   debugging).</p></li><li><p>If the number of elements in <var>a</var> is odd, then let <var>a</var>
   be the concatenation of two copies of <var>a</var>.</p></li><li><p>Let the object's <a href="#dash-list" id="line-styles:dash-list-2">dash list</a> be <var>a</var>.</p></li></ol>

  <p>When the <dfn id="dom-context-2d-getlinedash-2"><code>getLineDash()</code></dfn> method is
  invoked, it must return a sequence whose values are the values of the object's <a href="#dash-list" id="line-styles:dash-list-3">dash
  list</a>, in the same order.</p>

  <p>It is sometimes useful to change the &quot;phase&quot; of the dash pattern, e.g. to achieve a &quot;marching
  ants&quot; effect. The phase can be set using the <dfn id="dom-context-2d-linedashoffset-2"><code>lineDashOffset</code></dfn> attribute. On getting, it must
  return the current value. On setting, 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 object implementing the <code id="line-styles:canvaspathdrawingstyles-7"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface is created, the
  <code id="line-styles:dom-context-2d-linedashoffset-2-2"><a href="#dom-context-2d-linedashoffset-2">lineDashOffset</a></code> attribute must initially have
  the value 0.0.</p>

  <hr/>

  <p>When a user agent is to <dfn id="trace-a-path">trace a path</dfn>, given an object <var>style</var>
  that implements the <code id="line-styles:canvaspathdrawingstyles-8"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface, it must run the following
  algorithm. This algorithm returns a new <a href="#concept-path" id="line-styles:concept-path">path</a>.</p>

  <ol><li><p>Let <var>path</var> be a copy of the path being traced.</p></li><li><p>Prune all zero-length <a href="#line-segments" id="line-styles:line-segments">line segments</a> from <var>path</var>.</p></li><li><p>Remove from <var>path</var> any subpaths containing no lines (i.e. subpaths with
   just one point).</p></li><li><p>Replace each point in each subpath of <var>path</var> other than the first point
   and the last point of each subpath by a <i>join</i> that joins the line leading to that point to
   the line leading out of that point, such that the subpaths all consist of two points (a starting
   point with a line leading out of it, and an ending point with a line leading into it), one or
   more lines (connecting the points and the joins), and zero or more joins (each connecting one
   line to another), connected together such that each subpath is a series of one or more lines with
   a join between each one and a point on each end.</p></li><li><p>Add a straight closing line to each closed subpath in <var>path</var> connecting
   the last point and the first point of that subpath; change the last point to a join (from the
   previously last line to the newly added closing line), and change the first point to a join (from
   the newly added closing line to the first line).</p>

   </li><li><p>If the <var>styles</var> <a href="#dash-list" id="line-styles:dash-list-4">dash list</a> is empty, then jump to the step
   labeled <i>convert</i>.</p></li><li><p>Let <var>pattern width</var> be the concatenation of all the entries of the <var>styles</var> <a href="#dash-list" id="line-styles:dash-list-5">dash list</a>, in coordinate space units.</p>

   </li><li><p>For each subpath <var>subpath</var> in <var>path</var>, run the
   following substeps. These substeps mutate the subpaths in <var>path</var> <i>in
   vivo</i>.</p>

    <ol><li><p>Let <var>subpath width</var> be the length of all the lines of <var>subpath</var>, in coordinate space units.</p>

     </li><li><p>Let <var>offset</var> be the value of the <var>styles</var> <code id="line-styles:dom-context-2d-linedashoffset-2-3"><a href="#dom-context-2d-linedashoffset-2">lineDashOffset</a></code>, in coordinate space
     units.</p></li><li>

      <p>While <var>offset</var> is greater than <var>pattern width</var>,
      decrement it by <var>pattern width</var>.</p>

      <p>While <var>offset</var> is less than zero, increment it by <var>pattern
      width</var>.</p>

     </li><li><p>Define <var>L</var> to be a linear coordinate line defined along all lines in
     <var>subpath</var>, such that the start of the first line in the subpath is defined
     as coordinate 0, and the end of the last line in the subpath is defined as coordinate <var>subpath width</var>.</p></li><li><p>Let <var>position</var> be zero minus <var>offset</var>.</p></li><li><p>Let <var>index</var> be 0.</p></li><li><p>Let <var>current state</var> be <i>off</i> (the other states being <i>on</i>
     and <i>zero-on</i>).</p></li><li><p><i>Dash on</i>: Let <var>segment length</var> be
     the value of the <var>styles</var> <a href="#dash-list" id="line-styles:dash-list-6">dash
     list</a>'s <var>index</var>th entry.</p></li><li><p>Increment <var>position</var> by <var>segment length</var>.</p></li><li><p>If <var>position</var> is greater than <var>subpath width</var>,
     then end these substeps for this subpath and start them again for the next subpath; if there
     are no more subpaths, then jump to the step labeled <i>convert</i> instead.</p></li><li><p>If <var>segment length</var> is non-zero, then let <var>current state</var> be
     <i>on</i>.</p></li><li><p>Increment <var>index</var> by one.</p></li><li><p><i>Dash off</i>: Let <var>segment
     length</var> be the value of the <var>styles</var> <a href="#dash-list" id="line-styles:dash-list-7">dash list</a>'s <var>index</var>th entry.</p></li><li><p>Let <var>start</var> be the offset <var>position</var> on <var>L</var>.</p></li><li><p>Increment <var>position</var> by <var>segment length</var>.</p></li><li><p>If <var>position</var> is less than zero, then jump to the step labeled
     <i>post-cut</i>.</p></li><li><p>If <var>start</var> is less than zero, then let <var>start</var> be
     zero.</p></li><li><p>If <var>position</var> is greater than <var>subpath width</var>,
     then let <var>end</var> be the offset <var>subpath width</var> on <var>L</var>. Otherwise, let <var>end</var> be the offset <var>position</var> on <var>L</var>.</p></li><li>

      <p>Jump to the first appropriate step:</p>

      <dl class="switch"><dt>If <var>segment length</var> is zero and <var>current state</var> is
       <i>off</i></dt><dd>

        <p>Do nothing, just continue to the next step.</p>

       </dd><dt>If <var>current state</var> is <i>off</i></dt><dd>

        <p>Cut the line on which <var>end</var> finds itself short at <var>end</var> and place a point there, cutting the subpath that it was in in two;
        remove all line segments, joins, points, and subpaths that are between <var>start</var> and <var>end</var>; and finally place a single point at <var>start</var> with no lines connecting to it.</p>

        <p>The point has a <i>directionality</i> for the purposes of drawing line caps (see below).
        The directionality is the direction that the original line had at that point (i.e. when <var>L</var> was defined above).</p>

       </dd><dt>Otherwise</dt><dd>

        <p>Cut the line on which <var>start</var> finds itself into two at <var>start</var> and place a point there, cutting the subpath that it was in in two, and
        similarly cut the line on which <var>end</var> finds itself short at <var>end</var> and place a point there, cutting the subpath that <em>it</em> was in in
        two, and then remove all line segments, joins, points, and subpaths that are between <var>start</var> and <var>end</var>.</p>

        <p>If <var>start</var> and <var>end</var> are the same point, then this
        results in just the line being cut in two and two points being inserted there, with nothing
        being removed, unless a join also happens to be at that point, in which case the join must
        be removed.</p>

       </dd></dl>

     </li><li><p><i>Post-cut</i>: If <var>position</var> is greater than <var>subpath width</var>, then jump to the step labeled <i>convert</i>.</p></li><li><p>If <var>segment length</var> is greater than zero, then let
     <var>positioned-at-on-dash</var> be false.</p></li><li><p>Increment <var>index</var> by one. If it is equal to the number of entries in
     the <var>styles</var> <a href="#dash-list" id="line-styles:dash-list-8">dash list</a>, then let <var>index</var> be
     0.</p></li><li><p>Return to the step labeled <i>dash on</i>.</p></li></ol>

   </li><li>

    <p><i>Convert</i>: This is the step that converts the path to a new path that represents its
    stroke.</p>

    <p>Create a new <a href="#concept-path" id="line-styles:concept-path-2">path</a> that describes the edge of the areas
    that would be covered if a straight line of length equal to the <var>styles</var>
    <code id="line-styles:dom-context-2d-linewidth-2-3"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code> was swept along each subpath in <var>path</var> while being kept at an angle such that the line is orthogonal to the path
    being swept, replacing each point with the end cap necessary to satisfy the <var>styles</var> <code id="line-styles:dom-context-2d-linecap-2-3"><a href="#dom-context-2d-linecap-2">lineCap</a></code> attribute as
    described previously and elaborated below, and replacing each join with the join necessary to
    satisfy the <var>styles</var> <code id="line-styles:dom-context-2d-linejoin-2-4"><a href="#dom-context-2d-linejoin-2">lineJoin</a></code>
    type, as defined below.</p>

    <p><strong>Caps</strong>: Each point has a flat edge perpendicular to the direction of the line
    coming out of it. This is then augmented according to the value of the <var>styles</var> <code id="line-styles:dom-context-2d-linecap-2-4"><a href="#dom-context-2d-linecap-2">lineCap</a></code>. The &quot;<code>butt</code>&quot; value means that no additional line cap is added. The &quot;<code>round</code>&quot; value means that a semi-circle with the diameter equal to the <var>styles</var> <code id="line-styles:dom-context-2d-linewidth-2-4"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code> width must
    additionally be placed on to the line coming out of each point. The &quot;<code>square</code>&quot; value means that a rectangle with the length of the <var>styles</var> <code id="line-styles:dom-context-2d-linewidth-2-5"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code> width and the
    width of half the <var>styles</var> <code id="line-styles:dom-context-2d-linewidth-2-6"><a href="#dom-context-2d-linewidth-2">lineWidth</a></code> width, placed flat against the edge
    perpendicular to the direction of the line coming out of the point, must be added at each
    point.</p>

    <p>Points with no lines coming out of them must have two caps placed back-to-back as if it was
    really two points connected to each other by an infinitesimally short straight line in the
    direction of the point's <i>directionality</i> (as defined above).</p>

    <p><strong>Joins</strong>: In addition to the point where a 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 triangle connecting these two opposite corners with a straight line, with the third point
    of the triangle being the join point, must be added at all joins. The <code id="line-styles:dom-context-2d-linejoin-2-5"><a href="#dom-context-2d-linejoin-2">lineJoin</a></code> attribute controls whether anything else is
    rendered. The three aforementioned values have the following meanings:</p>

    <p>The &quot;<code>bevel</code>&quot; value means that this is all that is rendered at
    joins.</p>

    <p>The &quot;<code>round</code>&quot; value means that an 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 added at
    joins.</p>

    <p>The &quot;<code>miter</code>&quot; value means that a second triangle must (if it can given
    the miter length) be added 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
    (as set by the <var>style</var> <code id="line-styles:dom-context-2d-miterlimit-2-3"><a href="#dom-context-2d-miterlimit-2">miterLimit</a></code> attribute) to be exceeded, then this second
    triangle must not be added.</p> 


    <p>The subpaths in the newly created path must be oriented such that for any point, the number
    of times a half-infinite straight line drawn from that point crosses a subpath is even if and
    only if the number of times a half-infinite straight line drawn from that same point crosses a
    subpath going in one direction is equal to the number of times it crosses a subpath going in the
    other direction.</p>

   </li><li><p>Return the newly created path.</p></li></ol>


  <h6 id="text-styles"><span class="secno">4.12.5.1.4</span> Text styles<a class="self-link" href="#text-styles"/></h6>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-font"><a href="#dom-context-2d-font-2">font</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="text-styles:dom-context-2d-font-2"><a href="#dom-context-2d-font-2">font</a></code> [ = <var>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 <a data-x-internal="'font'" href="https://drafts.csswg.org/css-fonts/#font-prop" id="text-styles:'font'">'font'</a>
    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 id="text-styles:the-canvas-element"><a href="#the-canvas-element">canvas</a></code>
    element.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-textalign"><a href="#dom-context-2d-textalign-2">textAlign</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="text-styles:dom-context-2d-textalign-2"><a href="#dom-context-2d-textalign-2">textAlign</a></code> [ = <var>value</var> ]</dt><dd>

    <p>Returns the current text alignment settings.</p>

    <p>Can be set, to change the alignment. The possible values are and their meanings are given
    below. Other values are ignored. The default is &quot;<code>start</code>&quot;.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-textbaseline"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="text-styles:dom-context-2d-textbaseline-2"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> [ = <var>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 &quot;<code id="text-styles:dom-context-2d-textbaseline-alphabetic"><a href="#dom-context-2d-textbaseline-alphabetic">alphabetic</a></code>&quot;.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-direction"><a href="#dom-context-2d-direction-2">direction</a></code> [ = <var>value</var> ]</dt><dt><var>styles</var> . <code id="text-styles:dom-context-2d-direction-2"><a href="#dom-context-2d-direction-2">direction</a></code> [ = <var>value</var> ]</dt><dd>

    <p>Returns the current directionality.</p>

    <p>Can be set, to change the directionality. The possible values and their meanings are given
    below. Other values are ignored. The default is &quot;<code id="text-styles:dom-context-2d-direction-inherit"><a href="#dom-context-2d-direction-inherit">inherit</a></code>&quot;.</p>

   </dd></dl>

  
  <p>Objects that implement the <code id="text-styles:canvastextdrawingstyles"><a href="#canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> interface have attributes
  (defined in this section) that control how text is laid out (rasterized or outlined) by the
  object. Such objects can also have a <dfn id="font-style-source-object">font style source object</dfn>. For
  <code id="text-styles:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> objects, this is the <code id="text-styles:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> element
  referenced by the context's canvas property.</p>

  
  <p>The <dfn id="dom-context-2d-font-2"><code>font</code></dfn> IDL attribute, on setting, must
  be <a data-x-internal="parse-something-according-to-a-css-grammar" href="https://drafts.csswg.org/css-syntax/#parse-grammar" id="text-styles:parse-something-according-to-a-css-grammar">parsed as a CSS &lt;'font'&gt;
  value</a> (but without supporting property-independent style sheet syntax like 'inherit'), and
  the resulting font must be assigned to the context, with the <a data-x-internal="'line-height'" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="text-styles:'line-height'">'line-height'</a> component
  forced to 'normal', with the <a data-x-internal="'font-size'" href="https://drafts.csswg.org/css-fonts/#font-size-prop" id="text-styles:'font-size'">'font-size'</a> component converted to <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="text-styles:'px'">CSS pixels</a>, 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="https://html.spec.whatwg.org/multipage/references.html#refsCSS">[CSS]</a></p>

  <p>Font family names must be interpreted in the context of the <a href="#font-style-source-object" id="text-styles:font-style-source-object">font style source
  object</a> when the font is to be used; any fonts embedded using <code>@font-face</code> or loaded using <code id="text-styles:fontface"><a href="https://html.spec.whatwg.org/multipage/infrastructure.html#fontface">FontFace</a></code> objects that are visible to the
  <a href="#font-style-source-object" id="text-styles:font-style-source-object-2">font style source object</a> must therefore be available once they are loaded. (Each <a href="#font-style-source-object" id="text-styles:font-style-source-object-3">font style source
  object</a> has a <a data-x-internal="font-source" href="https://drafts.csswg.org/css-font-loading/#font-source" id="text-styles:font-source">font source</a>, which determines what fonts are available.) If a font
  is used before it is fully loaded, or if the <a href="#font-style-source-object" id="text-styles:font-style-source-object-4">font style source object</a> does not have
  that font in scope at the time the font is to be used, 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="https://html.spec.whatwg.org/multipage/references.html#refsCSSFONTS">[CSSFONTS]</a> <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSSFONTLOAD">[CSSFONTLOAD]</a></p>

  <p>On getting, the <code id="text-styles:dom-context-2d-font-2-2"><a href="#dom-context-2d-font-2">font</a></code> attribute must return the <a data-x-internal="serializing-a-css-value" href="https://drafts.csswg.org/cssom/#serialize-a-css-value" id="text-styles:serializing-a-css-value">serialized form</a> of the current font of the context (with
  no <a data-x-internal="'line-height'" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="text-styles:'line-height'-2">'line-height'</a> component). <a href="https://html.spec.whatwg.org/multipage/references.html#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>context.font</code> would evaluate to the string &quot;<code>italic 12px &quot;Unknown Font&quot;, sans-serif</code>&quot;. The &quot;400&quot;
   font-weight doesn't appear because that is the default value. The line-height doesn't appear
   because it is forced to &quot;normal&quot;, the default value.</p>

  </div>

  <p>When the object implementing the <code id="text-styles:canvastextdrawingstyles-2"><a href="#canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> interface is created, the
  font of the context must be set to 10px sans-serif. When the <a data-x-internal="'font-size'" href="https://drafts.csswg.org/css-fonts/#font-size-prop" id="text-styles:'font-size'-2">'font-size'</a> component is
  set to lengths using percentages, <a data-x-internal="'em'" href="https://drafts.csswg.org/css-values/#em" id="text-styles:'em'">'em'</a> or <a data-x-internal="'ex'" href="https://drafts.csswg.org/css-values/#ex" id="text-styles:'ex'">'ex'</a> units, or the 'larger' or
  'smaller' keywords, these must be interpreted relative to the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="text-styles:computed-value">computed value</a> of the
  <a data-x-internal="'font-size'" href="https://drafts.csswg.org/css-fonts/#font-size-prop" id="text-styles:'font-size'-3">'font-size'</a> property of the <a href="#font-style-source-object" id="text-styles:font-style-source-object-5">font style source object</a> at the time that
  the attribute is set, if it is an element. When the <a data-x-internal="'font-weight'" href="https://drafts.csswg.org/css-fonts/#font-weight-prop" id="text-styles:'font-weight'">'font-weight'</a> component is set to
  the relative values 'bolder' and 'lighter', these must be interpreted relative to the
  <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="text-styles:computed-value-2">computed value</a> of the <a data-x-internal="'font-weight'" href="https://drafts.csswg.org/css-fonts/#font-weight-prop" id="text-styles:'font-weight'-2">'font-weight'</a> property of the <a href="#font-style-source-object" id="text-styles:font-style-source-object-6">font style
  source object</a> at the time that the attribute is set, if it is an element. If the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="text-styles:computed-value-3">computed values</a> are undefined for a particular case (e.g. because
  the <a href="#font-style-source-object" id="text-styles:font-style-source-object-7">font style source object</a> is not an element or is not <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="text-styles:being-rendered">being
  rendered</a>), 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-2"><code>textAlign</code></dfn> IDL attribute, on
  getting, must return the current value. On setting, the current value must be changed to the new
  value. When the object implementing the <code id="text-styles:canvastextdrawingstyles-3"><a href="#canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> interface is
  created, the <code id="text-styles:dom-context-2d-textalign-2-2"><a href="#dom-context-2d-textalign-2">textAlign</a></code> attribute must initially
  have the value <code id="text-styles:dom-context-2d-textalign-start"><a href="#dom-context-2d-textalign-start">start</a></code>.</p>

  <p>The <dfn id="dom-context-2d-textbaseline-2"><code>textBaseline</code></dfn> IDL attribute, on
  getting, must return the current value. On setting, the current value must be changed to the new
  value. When the object implementing the <code id="text-styles:canvastextdrawingstyles-4"><a href="#canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> interface is
  created, the <code id="text-styles:dom-context-2d-textbaseline-2-2"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute must
  initially have the value <code id="text-styles:dom-context-2d-textbaseline-alphabetic-2"><a href="#dom-context-2d-textbaseline-alphabetic">alphabetic</a></code>.</p>

  <p>The <dfn id="dom-context-2d-direction-2"><code>direction</code></dfn> IDL attribute, on
  getting, must return the current value. On setting, the current value must be changed to the new
  value. When the object implementing the <code id="text-styles:canvastextdrawingstyles-5"><a href="#canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> interface is
  created, the <code id="text-styles:dom-context-2d-direction-2-2"><a href="#dom-context-2d-direction-2">direction</a></code> attribute must initially
  have the value &quot;<code id="text-styles:dom-context-2d-direction-inherit-2"><a href="#dom-context-2d-direction-inherit">inherit</a></code>&quot;.</p>

  
  <p>The <code id="text-styles:dom-context-2d-textalign-2-3"><a href="#dom-context-2d-textalign-2">textAlign</a></code> attribute's allowed keywords are
  as follows:</p>

  <dl><dt><dfn id="dom-context-2d-textalign-start"><code>start</code></dfn>
   </dt><dd><p>Align to the start edge of the text (left side in left-to-right text, right side in
   right-to-left text).</p></dd><dt><dfn id="dom-context-2d-textalign-end"><code>end</code></dfn>
   </dt><dd><p>Align to the end edge of the text (right side in left-to-right text, left side in
   right-to-left text).</p></dd><dt><dfn id="dom-context-2d-textalign-left"><code>left</code></dfn>
   </dt><dd><p>Align to the left.</p></dd><dt><dfn id="dom-context-2d-textalign-right"><code>right</code></dfn>
   </dt><dd><p>Align to the right.</p></dd><dt><dfn id="dom-context-2d-textalign-center"><code>center</code></dfn>
   </dt><dd><p>Align to the center.</p></dd></dl>

  <p>The <code id="text-styles:dom-context-2d-textbaseline-2-3"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code>
  attribute's allowed keywords correspond to alignment points in the
  font:</p>

  <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="https://html.spec.whatwg.org/images/baselines.png" width="738"/></p>

  <p>The keywords map to these alignment points as follows:</p>

  <dl><dt><dfn id="dom-context-2d-textbaseline-top"><code>top</code></dfn>
   </dt><dd>The top of the em square</dd><dt><dfn id="dom-context-2d-textbaseline-hanging"><code>hanging</code></dfn>
   </dt><dd>The hanging baseline</dd><dt><dfn id="dom-context-2d-textbaseline-middle"><code>middle</code></dfn>
   </dt><dd>The middle of the em square</dd><dt><dfn id="dom-context-2d-textbaseline-alphabetic"><code>alphabetic</code></dfn>
   </dt><dd>The alphabetic baseline</dd><dt><dfn id="dom-context-2d-textbaseline-ideographic"><code>ideographic</code></dfn>
   </dt><dd>The ideographic baseline</dd><dt><dfn id="dom-context-2d-textbaseline-bottom"><code>bottom</code></dfn>
   </dt><dd>The bottom of the em square</dd></dl>

  <p>The <code id="text-styles:dom-context-2d-direction-2-3"><a href="#dom-context-2d-direction-2">direction</a></code> attribute's allowed keywords are
  as follows:</p>

  <dl><dt><dfn id="dom-context-2d-direction-ltr"><code>ltr</code></dfn>

   </dt><dd><p>Treat input to the <a href="#text-preparation-algorithm" id="text-styles:text-preparation-algorithm">text preparation algorithm</a> as left-to-right text.</p></dd><dt><dfn id="dom-context-2d-direction-rtl"><code>rtl</code></dfn>

   </dt><dd><p>Treat input to the <a href="#text-preparation-algorithm" id="text-styles:text-preparation-algorithm-2">text preparation algorithm</a> as right-to-left text.</p></dd><dt><dfn id="dom-context-2d-direction-inherit"><code>inherit</code></dfn>

   </dt><dd><p>Default to the directionality of the <code id="text-styles:the-canvas-element-3"><a href="#the-canvas-element">canvas</a></code> element or <code id="text-styles:document"><a href="https://html.spec.whatwg.org/multipage/dom.html#document">Document</a></code>
   as appropriate.</p></dd></dl>

  <p>The <dfn id="text-preparation-algorithm">text preparation algorithm</dfn> is as follows. It takes as input a string <var>text
  </var>, a <code id="text-styles:canvastextdrawingstyles-6"><a href="#canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> object <var>target</var>, and an optional length
  <var>maxWidth</var>. It returns an array of glyph shapes, each positioned on a common coordinate
  space, a <var>physical alignment</var> whose value is one of <i>left</i>, <i>right</i>, and
  <i>center</i>, and an <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box">inline box</a>. (Most callers of this algorithm ignore the
  <var>physical alignment</var> and the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-2">inline box</a>.)</p>

  <ol><li><p>If <var>maxWidth</var> was provided but is less than or equal to zero or equal to NaN,
   then return an empty array.</p></li><li><p>Replace all <a data-x-internal="space-characters" href="https://infra.spec.whatwg.org/#ascii-whitespace" id="text-styles:space-characters">ASCII whitespace</a> in <var>text</var> with U+0020 SPACE
   characters.</p></li><li><p>Let <var>font</var> be the current font of <var>target</var>, as given
   by that object's <code id="text-styles:dom-context-2d-font-2-3"><a href="#dom-context-2d-font-2">font</a></code> attribute.</p></li><li>

    <p>Apply the appropriate step from the following list to determine the value of <var>direction</var>:</p>

    <dl class="switch"><dt>If the <var>target</var> object's <code id="text-styles:dom-context-2d-direction-2-4"><a href="#dom-context-2d-direction-2">direction</a></code> attribute has the value &quot;<code id="text-styles:dom-context-2d-direction-ltr"><a href="#dom-context-2d-direction-ltr">ltr</a></code>&quot;</dt><dd>Let <var>direction</var> be '<a href="https://html.spec.whatwg.org/multipage/dom.html#concept-ltr" id="text-styles:concept-ltr">ltr</a>'.</dd><dt>If the <var>target</var> object's <code id="text-styles:dom-context-2d-direction-2-5"><a href="#dom-context-2d-direction-2">direction</a></code> attribute has the value &quot;<code id="text-styles:dom-context-2d-direction-rtl"><a href="#dom-context-2d-direction-rtl">rtl</a></code>&quot;</dt><dd>Let <var>direction</var> be '<a href="https://html.spec.whatwg.org/multipage/dom.html#concept-rtl" id="text-styles:concept-rtl">rtl</a>'.</dd><dt>If the <var>target</var> object's <a href="#font-style-source-object" id="text-styles:font-style-source-object-8">font style source object</a> is an
     element</dt><dd>Let <var>direction</var> be <a href="https://html.spec.whatwg.org/multipage/dom.html#the-directionality" id="text-styles:the-directionality">the directionality</a> of the <var>target</var> object's <a href="#font-style-source-object" id="text-styles:font-style-source-object-9">font style source object</a>.</dd><dt>If the <var>target</var> object's <a href="#font-style-source-object" id="text-styles:font-style-source-object-10">font style source object</a> is a
     <code id="text-styles:document-2"><a href="https://html.spec.whatwg.org/multipage/dom.html#document">Document</a></code> with a non-null <a data-x-internal="document-element" href="https://dom.spec.whatwg.org/#document-element" id="text-styles:document-element">document element</a></dt><dd>Let <var>direction</var> be <a href="https://html.spec.whatwg.org/multipage/dom.html#the-directionality" id="text-styles:the-directionality-2">the directionality</a> of the <var>target</var>
     object's <a href="#font-style-source-object" id="text-styles:font-style-source-object-11">font style source object</a>'s <a data-x-internal="document-element" href="https://dom.spec.whatwg.org/#document-element" id="text-styles:document-element-2">document element</a>.</dd><dt>Otherwise</dt><dd>Let <var>direction</var> be '<a href="https://html.spec.whatwg.org/multipage/dom.html#concept-ltr" id="text-styles:concept-ltr-2">ltr</a>'.</dd></dl>

   </li><li><p>Form a hypothetical infinitely-wide CSS <a data-x-internal="line-box" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="text-styles:line-box">line box</a> containing a single
   <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-3">inline box</a> containing the text <var>text</var>, with all the properties at their
   initial values except the <a data-x-internal="'font'" href="https://drafts.csswg.org/css-fonts/#font-prop" id="text-styles:'font'-2">'font'</a> property of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-4">inline box</a> set to
   <var>font</var>, the <a data-x-internal="'direction'" href="https://drafts.csswg.org/css-writing-modes/#direction" id="text-styles:'direction'">'direction'</a> property of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-5">inline box</a> set to
   <var>direction</var>, and the <a data-x-internal="'white-space'" href="https://drafts.csswg.org/css-text/#white-space-property" id="text-styles:'white-space'">'white-space'</a> property set to 'pre'. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSS">[CSS]</a></p></li><li><p>If <var>maxWidth</var> was provided and the hypothetical width of the
   <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-6">inline box</a> in the hypothetical <a data-x-internal="line-box" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="text-styles:line-box-2">line box</a> is greater than
   <var>maxWidth</var> <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="text-styles:'px'-2">CSS pixels</a>, then change <var>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.</p></li><li>

    <p>The <var>anchor point</var> is a point on the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-7">inline box</a>, and the <var>physical
    alignment</var> is one of the values <i>left</i>, <i>right</i>, and <i>center</i>. These
    variables are determined by the <code id="text-styles:dom-context-2d-textalign-2-4"><a href="#dom-context-2d-textalign-2">textAlign</a></code> and
    <code id="text-styles:dom-context-2d-textbaseline-2-4"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> values as follows:</p>

    <p>Horizontal position:</p>

    <dl><dt>If <code id="text-styles:dom-context-2d-textalign-2-5"><a href="#dom-context-2d-textalign-2">textAlign</a></code> is <code id="text-styles:dom-context-2d-textalign-left"><a href="#dom-context-2d-textalign-left">left</a></code></dt><dt>If <code id="text-styles:dom-context-2d-textalign-2-6"><a href="#dom-context-2d-textalign-2">textAlign</a></code> is <code id="text-styles:dom-context-2d-textalign-start-2"><a href="#dom-context-2d-textalign-start">start</a></code> and <var>direction</var> is
     'ltr'</dt><dt>If <code id="text-styles:dom-context-2d-textalign-2-7"><a href="#dom-context-2d-textalign-2">textAlign</a></code> is <code id="text-styles:dom-context-2d-textalign-end"><a href="#dom-context-2d-textalign-end">end</a></code> and <var>direction</var> is 'rtl'</dt><dd>Let the <var>anchor point</var>'s horizontal position be the left edge of the
     <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-8">inline box</a>, and let <var>physical alignment</var> be <i>left</i>.</dd><dt>If <code id="text-styles:dom-context-2d-textalign-2-8"><a href="#dom-context-2d-textalign-2">textAlign</a></code> is <code id="text-styles:dom-context-2d-textalign-right"><a href="#dom-context-2d-textalign-right">right</a></code></dt><dt>If <code id="text-styles:dom-context-2d-textalign-2-9"><a href="#dom-context-2d-textalign-2">textAlign</a></code> is <code id="text-styles:dom-context-2d-textalign-end-2"><a href="#dom-context-2d-textalign-end">end</a></code> and <var>direction</var> is 'ltr'</dt><dt>If <code id="text-styles:dom-context-2d-textalign-2-10"><a href="#dom-context-2d-textalign-2">textAlign</a></code> is <code id="text-styles:dom-context-2d-textalign-start-3"><a href="#dom-context-2d-textalign-start">start</a></code> and <var>direction</var> is
     'rtl'</dt><dd>Let the <var>anchor point</var>'s horizontal position be the right edge of the
     <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-9">inline box</a>, and let <var>physical alignment</var> be <i>right</i>.</dd><dt>If <code id="text-styles:dom-context-2d-textalign-2-11"><a href="#dom-context-2d-textalign-2">textAlign</a></code> is <code id="text-styles:dom-context-2d-textalign-center"><a href="#dom-context-2d-textalign-center">center</a></code></dt><dd>Let the <var>anchor point</var>'s horizontal position be half way between the left
     and right edges of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-10">inline box</a>, and let <var>physical alignment</var> be
     <i>center</i>.</dd></dl>

    <p>Vertical position:</p>

    <dl><dt>If <code id="text-styles:dom-context-2d-textbaseline-2-5"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> is <code id="text-styles:dom-context-2d-textbaseline-top"><a href="#dom-context-2d-textbaseline-top">top</a></code></dt><dd>Let the <var>anchor point</var>'s vertical position be the top of the em box of
     the first available font of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-11">inline box</a>.</dd><dt>If <code id="text-styles:dom-context-2d-textbaseline-2-6"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> is <code id="text-styles:dom-context-2d-textbaseline-hanging"><a href="#dom-context-2d-textbaseline-hanging">hanging</a></code></dt><dd>Let the <var>anchor point</var>'s vertical position be the hanging baseline of the
     first available font of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-12">inline box</a>.</dd><dt>If <code id="text-styles:dom-context-2d-textbaseline-2-7"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> is <code id="text-styles:dom-context-2d-textbaseline-middle"><a href="#dom-context-2d-textbaseline-middle">middle</a></code></dt><dd>Let the <var>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 <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-13">inline box</a>.</dd><dt>If <code id="text-styles:dom-context-2d-textbaseline-2-8"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> is <code id="text-styles:dom-context-2d-textbaseline-alphabetic-3"><a href="#dom-context-2d-textbaseline-alphabetic">alphabetic</a></code></dt><dd>Let the <var>anchor point</var>'s vertical position be the alphabetic baseline of
     the first available font of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-14">inline box</a>.</dd><dt>If <code id="text-styles:dom-context-2d-textbaseline-2-9"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> is <code id="text-styles:dom-context-2d-textbaseline-ideographic"><a href="#dom-context-2d-textbaseline-ideographic">ideographic</a></code></dt><dd>Let the <var>anchor point</var>'s vertical position be the ideographic baseline of
     the first available font of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-15">inline box</a>.</dd><dt>If <code id="text-styles:dom-context-2d-textbaseline-2-10"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> is <code id="text-styles:dom-context-2d-textbaseline-bottom"><a href="#dom-context-2d-textbaseline-bottom">bottom</a></code></dt><dd>Let the <var>anchor point</var>'s vertical position be the bottom of the em box of
     the first available font of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-16">inline box</a>.</dd></dl>

   </li><li>

    <p>Let <var>result</var> be an array constructed by iterating over each glyph in the
    <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-17">inline box</a> from left to right (if any), adding to the array, for each glyph, the
    shape of the glyph as it is in the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="text-styles:inline-box-18">inline box</a>, positioned on a coordinate space
    using <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="text-styles:'px'-3">CSS pixels</a> with its origin is at the <var>anchor
    point</var>.</p>

   </li><li><p>Return <var>result</var>, <var>physical alignment</var>, and the inline
   box.</p></li></ol>


  <h6 id="building-paths"><span class="secno">4.12.5.1.5</span> Building paths<a class="self-link" href="#building-paths"/></h6>

  <p>Objects that implement the <code id="building-paths:canvaspath"><a href="#canvaspath">CanvasPath</a></code> interface have a <a href="#concept-path" id="building-paths:concept-path">path</a>. A <dfn id="concept-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 <dfn id="line-segments">line segments</dfn>, 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 only one point are ignored when painting the path.</p>

  <p><a href="#concept-path" id="building-paths:concept-path-2">Paths</a> have a <dfn id="need-new-subpath">need new subpath</dfn> flag. When this
  flag is set, certain APIs create a new subpath rather than extending the previous one. When a
  <a href="#concept-path" id="building-paths:concept-path-3">path</a> is created, its <a href="#need-new-subpath" id="building-paths:need-new-subpath">need new subpath</a> flag must be
  set.</p>

  <p>When an object implementing the <code id="building-paths:canvaspath-2"><a href="#canvaspath">CanvasPath</a></code> interface is created, its <a href="#concept-path" id="building-paths:concept-path-4">path</a> must be initialized to zero subpaths.</p>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-moveto"><a href="#dom-context-2d-moveto-2">moveTo</a></code>(<var>x</var>, <var>y</var>)</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-moveto-2"><a href="#dom-context-2d-moveto-2">moveTo</a></code>(<var>x</var>, <var>y</var>)</dt><dd>

    <p>Creates a new subpath with the given point.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-closepath"><a href="#dom-context-2d-closepath-2">closePath</a></code>()</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-closepath-2"><a href="#dom-context-2d-closepath-2">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>context</var> . <code id="dom-context-2d-lineto"><a href="#dom-context-2d-lineto-2">lineTo</a></code>(<var>x</var>, <var>y</var>)</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-lineto-2"><a href="#dom-context-2d-lineto-2">lineTo</a></code>(<var>x</var>, <var>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>context</var> . <code id="dom-context-2d-quadraticcurveto"><a href="#dom-context-2d-quadraticcurveto-2">quadraticCurveTo</a></code>(<var>cpx</var>, <var>cpy</var>, <var>x</var>, <var>y</var>)</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-quadraticcurveto-2"><a href="#dom-context-2d-quadraticcurveto-2">quadraticCurveTo</a></code>(<var>cpx</var>, <var>cpy</var>, <var>x</var>, <var>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>context</var> . <code id="dom-context-2d-beziercurveto"><a href="#dom-context-2d-beziercurveto-2">bezierCurveTo</a></code>(<var>cp1x</var>, <var>cp1y</var>, <var>cp2x</var>, <var>cp2y</var>, <var>x</var>, <var>y</var>)</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-beziercurveto-2"><a href="#dom-context-2d-beziercurveto-2">bezierCurveTo</a></code>(<var>cp1x</var>, <var>cp1y</var>, <var>cp2x</var>, <var>cp2y</var>, <var>x</var>, <var>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>context</var> . <code id="dom-context-2d-arcto"><a href="#dom-context-2d-arcto-2">arcTo</a></code>(<var>x1</var>, <var>y1</var>, <var>x2</var>, <var>y2</var>, <var>radiusX</var> [, <var>radiusY</var>, <var>rotation</var> ] )</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-arcto-2"><a href="#dom-context-2d-arcto-2">arcTo</a></code>(<var>x1</var>, <var>y1</var>, <var>x2</var>, <var>y2</var>, <var>radiusX</var> [, <var>radiusY</var>, <var>rotation</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>If two radii are provided, then the first controls the width of the arc's ellipse, and the
    second controls the height. If only one is provided, or if they are the same, then the arc is
    from a circle. In the case of an ellipse, the rotation argument controls the clockwise
    inclination of the ellipse relative to the x-axis.</p>

    <p>Throws an <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="building-paths:indexsizeerror">&quot;<code>IndexSizeError</code>&quot;</a> <code id="building-paths:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if the given
    radius is negative.</p>

    <figure class="diagrams">
     
     <img alt="" height="254" src="https://html.spec.whatwg.org/images/arcTo1.png" width="357"/>
     <img alt="" height="310" src="https://html.spec.whatwg.org/images/arcTo2.png" width="468"/>
     <img alt="" height="233" src="https://html.spec.whatwg.org/images/arcTo3.png" width="513"/>
    </figure>


   </dd><dt><var>context</var> . <code id="dom-context-2d-arc"><a href="#dom-context-2d-arc-2">arc</a></code>(<var>x</var>, <var>y</var>, <var>radius</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>anticlockwise</var> ] )</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-arc-2"><a href="#dom-context-2d-arc-2">arc</a></code>(<var>x</var>, <var>y</var>, <var>radius</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>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 <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="building-paths:indexsizeerror-2">&quot;<code>IndexSizeError</code>&quot;</a> <code id="building-paths:domexception-2"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if the given
    radius is negative.</p>

    <figure class="diagrams">
     
     <img alt="" height="255" src="https://html.spec.whatwg.org/images/arc1.png" width="590"/>
    </figure>


   </dd><dt><var>context</var> . <code id="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse-2">ellipse</a></code>(<var>x</var>, <var>y</var>, <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>anticlockwise</var>] )</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-ellipse-2"><a href="#dom-context-2d-ellipse-2">ellipse</a></code>(<var>x</var>, <var>y</var>, <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>, <var>endAngle</var> [, <var>anticlockwise</var>] )</dt><dd>

    <p>Adds points to the subpath such that the arc described by the circumference of the ellipse
    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 <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="building-paths:indexsizeerror-3">&quot;<code>IndexSizeError</code>&quot;</a> <code id="building-paths:domexception-3"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if the given
    radius is negative.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-rect"><a href="#dom-context-2d-rect-2">rect</a></code>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</dt><dt><var>path</var> . <code id="building-paths:dom-context-2d-rect-2"><a href="#dom-context-2d-rect-2">rect</a></code>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</dt><dd>

    <p>Adds a new closed subpath to the path, representing the given rectangle.</p>

   </dd></dl>

  
  <p>The following methods allow authors to manipulate the <a href="#concept-path" id="building-paths:concept-path-5">paths</a>
  of objects implementing the <code id="building-paths:canvaspath-3"><a href="#canvaspath">CanvasPath</a></code> interface.</p>

  <p>For objects implementing the <code id="building-paths:canvasdrawpath"><a href="#canvasdrawpath">CanvasDrawPath</a></code> and <code id="building-paths:canvastransform"><a href="#canvastransform">CanvasTransform</a></code>
  interfaces, the points passed to the methods, and the resulting lines added to <a href="#current-default-path" id="building-paths:current-default-path">current
  default path</a> by these methods, must be transformed according to the <a href="#transformations" id="building-paths:transformations">current transformation matrix</a> before being added to
  the path.</p>

  <p>The <dfn id="dom-context-2d-moveto-2"><code>moveTo(<var>x</var>, <var>y</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Create a new subpath with the specified point as its first (and only) point.</p></li></ol>

  <p>When the user agent is to <dfn id="ensure-there-is-a-subpath">ensure there is a subpath</dfn> for a coordinate (<var>x</var>,
  <var>y</var>) on a <a href="#concept-path" id="building-paths:concept-path-6">path</a>, the user agent must check to see if
  the <a href="#concept-path" id="building-paths:concept-path-7">path</a> has its <a href="#need-new-subpath" id="building-paths:need-new-subpath-2">need new subpath</a> flag set. If it
  does, then the user agent must create a new subpath with the point (<var>x</var>, <var>y</var>) as
  its first (and only) point, as if the <code id="building-paths:dom-context-2d-moveto-2-2"><a href="#dom-context-2d-moveto-2">moveTo()</a></code> method
  had been called, and must then unset the <a href="#concept-path" id="building-paths:concept-path-8">path</a>'s <a href="#need-new-subpath" id="building-paths:need-new-subpath-3">need new
  subpath</a> flag.</p>


  <p>The <dfn id="dom-context-2d-closepath-2"><code>closePath()</code></dfn> method, when invoked,
  must do nothing if the object's path 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
  &quot;closing&quot; the shape, and then repeating the last (possibly implied) <code id="building-paths:dom-context-2d-moveto-2-3"><a href="#dom-context-2d-moveto-2">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 object's path.</p>


  <p>The <dfn id="dom-context-2d-lineto-2"><code>lineTo(<var>x</var>, <var>y</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>If the object's path has no subpaths, then <a href="#ensure-there-is-a-subpath" id="building-paths:ensure-there-is-a-subpath">ensure there is a subpath</a> for
   <span>(<var>x</var>, <var>y</var>)</span>.</p></li><li><p>Otherwise, connect the last point in the subpath to the given point (<var>x</var>,
   <var>y</var>) using a straight line, and then add the given point (<var>x</var>, <var>y</var>) to
   the subpath.</p></li></ol>

  <p>The <dfn id="dom-context-2d-quadraticcurveto-2"><code>quadraticCurveTo(<var>cpx</var>,
  <var>cpy</var>, <var>x</var>, <var>y</var>)</code></dfn> method, when invoked, must run these
  steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p><a href="#ensure-there-is-a-subpath" id="building-paths:ensure-there-is-a-subpath-2">Ensure there is a subpath</a> for <span>(<var>cpx</var>,
   <var>cpy</var>)</span></p></li><li><p>Connect the last point in the subpath to the given point (<var>x</var>, <var>y</var>)
   using a quadratic Bézier curve with control point (<var>cpx</var>, <var>cpy</var>). <a href="https://html.spec.whatwg.org/multipage/references.html#refsBEZIER">[BEZIER]</a></p></li><li><p>Add the given point (<var>x</var>, <var>y</var>) to the subpath.</p></li></ol>

  <p>The <dfn id="dom-context-2d-beziercurveto-2"><code>bezierCurveTo(<var>cp1x</var>,
  <var>cp1y</var>, <var>cp2x</var>, <var>cp2y</var>, <var>x</var>, <var>y</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p><a href="#ensure-there-is-a-subpath" id="building-paths:ensure-there-is-a-subpath-3">Ensure there is a subpath</a> for <span>(<var>cp1x</var>,
   <var>cp1y</var>)</span>.</p></li><li><p>Connect the last point in the subpath to the given point (<var>x</var>, <var>y</var>)
   using a cubic Bézier curve with control points (<var>cp1x</var>, <var>cp1y</var>) and
   (<var>cp2x</var>, <var>cp2y</var>). <a href="https://html.spec.whatwg.org/multipage/references.html#refsBEZIER">[BEZIER]</a></p></li><li><p>Add the point (<var>x</var>, <var>y</var>) to the subpath.</p></li></ol>

  <hr/>

  <p>The <dfn id="dom-context-2d-arcto-2"><code>arcTo(<var>x1</var>, <var>y1</var>, <var>x2</var>,
  <var>y2</var>, <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>)</code></dfn> method,
  when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p><a href="#ensure-there-is-a-subpath" id="building-paths:ensure-there-is-a-subpath-4">Ensure there is a subpath</a> for <span>(<var>x1</var>,
   <var>y1</var>)</span>.</p></li><li><p>If either <var>radiusX</var> or <var>radiusY</var> are negative, then throw an
   <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="building-paths:indexsizeerror-4">&quot;<code>IndexSizeError</code>&quot;</a> <code id="building-paths:domexception-4"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.</p></li><li><p>If <var>radiusY</var> is omitted, then set <var>radiusY</var> to
   <var>radiusX</var>.</p></li><li><p>Let the point (<var>x0</var>, <var>y0</var>) be the last point in the subpath, transformed
   by the inverse of the <a href="#transformations" id="building-paths:transformations-2">current transformation
   matrix</a> (so that it is in the same coordinate system as the points passed to the
   method).</p></li><li><p>If the point (<var>x0</var>, <var>y0</var>) is equal to the point (<var>x1</var>,
   <var>y1</var>), or if the point (<var>x1</var>, <var>y1</var>) is equal to the point
   (<var>x2</var>, <var>y2</var>), or if both <var>radiusX</var> and <var>radiusY</var> are zero,
   then add the point (<var>x1</var>, <var>y1</var>) to the subpath, and connect that point to the
   previous point (<var>x0</var>, <var>y0</var>) by a straight line.</p></li><li><p>Otherwise, if the points (<var>x0</var>, <var>y0</var>), (<var>x1</var>, <var>y1</var>),
   and (<var>x2</var>, <var>y2</var>) all lie on a single straight line, then add the point
   (<var>x1</var>, <var>y1</var>) to the subpath, and connect that point to the previous point
   (<var>x0</var>, <var>y0</var>) by a straight line.</p></li><li><p>Otherwise, let <var>The Arc</var> be the shortest arc given by circumference of the
   ellipse that has radius <var>radiusX</var> on the major axis and radius <var>radiusY</var> on the
   minor axis, and whose semi-major axis is rotated <var>rotation</var> radians clockwise from the
   positive x-axis, and that has one point tangent to the half-infinite line that crosses the point
   (<var>x0</var>, <var>y0</var>) and ends at the point (<var>x1</var>, <var>y1</var>), and that has
   a different point tangent to the half-infinite line that ends at the point (<var>x1</var>,
   <var>y1</var>) and crosses the point (<var>x2</var>, <var>y2</var>). The points at which this
   ellipse touches these two lines are called the start and end tangent points respectively. Connect
   the point (<var>x0</var>, <var>y0</var>) to the start tangent point by a straight line, adding
   the start tangent point to the subpath, and then connect the start tangent point to the end
   tangent point by <var>The Arc</var>, adding the end tangent point to the subpath.</p></li></ol>

  <hr/>

  <p>The <dfn id="dom-context-2d-arc-2"><code>arc(<var>x</var>, <var>y</var>,
  <var>radius</var>, <var>startAngle</var>, <var>endAngle</var>, <var>anticlockwise</var>)</code></dfn> and <dfn id="dom-context-2d-ellipse-2"><code>ellipse(<var>x</var>, <var>y</var>, <var>radiusX</var>, <var>radiusY</var>, <var>rotation</var>, <var>startAngle</var>, <var>endAngle</var>, <var>anticlockwise</var>)</code></dfn> methods draw arcs.</p>

  <p>The <code id="building-paths:dom-context-2d-arc-2-2"><a href="#dom-context-2d-arc-2">arc()</a></code> method is equivalent to the <code id="building-paths:dom-context-2d-ellipse-2-2"><a href="#dom-context-2d-ellipse-2">ellipse()</a></code> method in the case where the two radii are equal.
  When the <code id="building-paths:dom-context-2d-arc-2-3"><a href="#dom-context-2d-arc-2">arc()</a></code> method is invoked, it must act as if the
  <code id="building-paths:dom-context-2d-ellipse-2-3"><a href="#dom-context-2d-ellipse-2">ellipse()</a></code> method had been invoked with the <var>radiusX</var> and <var>radiusY</var> arguments set to the value of the <var>radius</var> argument, the <var>rotation</var> argument set to zero, and the
  other arguments set to the same values as their identically named arguments on the <code id="building-paths:dom-context-2d-arc-2-4"><a href="#dom-context-2d-arc-2">arc()</a></code> method.</p>

  <p>The <code id="building-paths:dom-context-2d-ellipse-2-4"><a href="#dom-context-2d-ellipse-2">ellipse()</a></code> method, when invoked, must run these
  steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>If either <var>radiusX</var> or <var>radiusY</var> are negative, then throw an
   <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="building-paths:indexsizeerror-5">&quot;<code>IndexSizeError</code>&quot;</a> <code id="building-paths:domexception-5"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.</p></li><li><p>If the object's path has any subpaths, then add a straight line from the last point in the
   subpath to the start point of the arc.</p></li><li>
    <p>Add the start and end points of the arc to the subpath, and connect them with an arc. The arc
    and its start and end points are defined as follows:</p>

    <p>Consider an ellipse that has its origin at (<var>x</var>, <var>y</var>), that has a
    major-axis radius <var>radiusX</var> and a minor-axis radius <var>radiusY</var>, and that is
    rotated about its origin such that its semi-major axis is inclined <var>rotation</var> radians
    clockwise from the x-axis.</p>

    <p>If <var>anticlockwise</var> is false and <span><var>endAngle</var>-<var>startAngle</var></span> is equal to or greater than <span>2π</span>, or, if <var>anticlockwise</var> is <em>true</em> and <span><var>startAngle</var>-<var>endAngle</var></span> is equal to or greater than <span>2π</span>, then the arc is the whole circumference of this ellipse, and the point
    at <var>startAngle</var> along this circle's circumference, measured in radians clockwise from
    the ellipse's semi-major axis, acts as both the start point and the end point.</p>

    <p>Otherwise, the points at <var>startAngle</var> and <var>endAngle</var> along this circle's
    circumference, measured in radians clockwise from the ellipse's semi-major axis, are the start
    and end points respectively, and the arc is the path along the circumference of this ellipse
    from the start point to the end point, going anti-clockwise if <var>anticlockwise</var> is true,
    and clockwise otherwise. Since the points are on the ellipse, as opposed to being simply angles
    from zero, the arc can never cover an angle greater than <span>2π</span>
    radians.</p>

    <p class="note">Even if the arc covers the entire circumference of the ellipse and there are no
    other points in the subpath, the path is not closed unless the <code id="building-paths:dom-context-2d-closepath-2-2"><a href="#dom-context-2d-closepath-2">closePath()</a></code> method is appropriately invoked.</p>
   </li></ol>

  <hr/>

  <p>The <dfn id="dom-context-2d-rect-2"><code>rect(<var>x</var>, <var>y</var>, <var>w</var>,
  <var>h</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Create a new subpath containing just the four points (<var>x</var>, <var>y</var>),
   (<var>x</var>+<var>w</var>, <var>y</var>), (<var>x</var>+<var>w</var>,
   <var>y</var>+<var>h</var>), (<var>x</var>, <var>y</var>+<var>h</var>), in that order, with those
   four points connected by straight lines.</p></li><li><p>Mark the subpath as closed.</p></li><li><p>Create a new subpath with the point (<var>x</var>, <var>y</var>) as the only point in the
   subpath.</p></li></ol>

  
  <h6 id="path2d-objects"><span class="secno">4.12.5.1.6</span> <code id="path2d-objects:path2d"><a href="#path2d">Path2D</a></code> objects<a class="self-link" href="#path2d-objects"/></h6>

  <p><code id="path2d-objects:path2d-2"><a href="#path2d">Path2D</a></code> objects can be used to declare paths that are then later used on
  objects implementing the <code id="path2d-objects:canvasdrawpath"><a href="#canvasdrawpath">CanvasDrawPath</a></code> interface. In addition to many of the APIs
  described in earlier sections, <code id="path2d-objects:path2d-3"><a href="#path2d">Path2D</a></code> objects have methods to combine paths, and to
  add text to paths.</p>

  <dl class="domintro"><dt><var>path</var> = new <code id="path2d-objects:dom-path2d"><a href="#dom-path2d">Path2D</a></code>()</dt><dd>

    <p>Creates a new empty <code id="path2d-objects:path2d-4"><a href="#path2d">Path2D</a></code> object.</p>

   </dd><dt><var>path</var> = new <code id="path2d-objects:dom-path2d-copy"><a href="#dom-path2d-copy">Path2D</a></code>(<var>path</var>)</dt><dd>

    <p>Creates a new <code id="path2d-objects:path2d-5"><a href="#path2d">Path2D</a></code> object that is a copy of the argument.</p>

   </dd><dt><var>path</var> = new <code id="path2d-objects:dom-path2d-merge"><a href="#dom-path2d-merge">Path2D</a></code>(<var>paths</var> [, <var>fillRule</var> ] )</dt><dd>

    <p>Creates a new <code id="path2d-objects:path2d-6"><a href="#path2d">Path2D</a></code> object that describes a path that outlines the given <var>paths</var>, using the given fill rule.</p>

   </dd><dt><var>path</var> = new <code id="path2d-objects:dom-path2d-withdata"><a href="#dom-path2d-withdata">Path2D</a></code>(<var>d</var>)</dt><dd>

    <p>Creates a new path with the path described by the argument, interpreted as SVG path data. <a href="https://html.spec.whatwg.org/multipage/references.html#refsSVG">[SVG]</a></p>

   </dd><dt><var>path</var> . <code id="dom-path2d-addpath"><a href="#dom-path2d-addpath-2">addPath</a></code>(<var>path</var> [, <var>transform</var> ] )</dt><dd>

    <p>Adds to the path the path given by the argument.</p>

   </dd></dl>

  
  <p>The <dfn id="dom-path2d"><code>Path2D()</code></dfn> constructor, when invoked, must return a
  newly created <code id="path2d-objects:path2d-7"><a href="#path2d">Path2D</a></code> object.</p>

  <hr/>

  <p>The <dfn id="dom-path2d-copy"><code>Path2D(<var>path</var>)</code></dfn>
  constructor, when invoked, must return a newly created <code id="path2d-objects:path2d-8"><a href="#path2d">Path2D</a></code> object, to which the
  subpaths of the argument are added. (In other words, it returns a copy of the argument.)</p>

  <hr/>

  <p>The <dfn id="dom-path2d-merge"><code>Path2D(<var>paths</var>,
  <var>fillRule</var>)</code></dfn> constructor, when invoked, must run these steps:</p>

  <ol><li>

    <p>Run the appropriate step from the following list, based on the constructor's second
    argument:</p>

    <dl class="switch"><dt>If it is &quot;nonzero&quot;</dt><dd>

      <p>Let <var>merged path</var> be a <a href="#concept-path" id="path2d-objects:concept-path">path</a> that
      consists of a set of non-overlapping subpaths that exactly outline the points from which, in
      any of the <a href="#concept-path" id="path2d-objects:concept-path-2">paths</a> provided in the constructor's first
      argument, the number of times a half-infinite straight line drawn from that point crosses a
      subpath going in one direction is not equal to the number of times it crosses a subpath going
      in the other direction.</p>

     </dd><dt>If it is &quot;evenodd&quot;</dt><dd>

      <p>Let <var>merged path</var> be a <a href="#concept-path" id="path2d-objects:concept-path-3">path</a> that
      consists of a set of non-overlapping subpaths that exactly outline the points from which, in
      any of the <a href="#concept-path" id="path2d-objects:concept-path-4">paths</a> provided in the constructor's first
      argument, the number of times a half-infinite straight line drawn from that point crosses that
      path is odd.</p>

     </dd></dl>

    <p>The subpaths in <var>merged path</var> must be oriented such that for any point,
    the number of times a half-infinite straight line drawn from that point crosses a subpath is
    even if and only if the number of times a half-infinite straight line drawn from that same point
    crosses a subpath going in one direction is equal to the number of times it crosses a subpath
    going in the other direction.</p>

   </li><li><p>Add all the subpaths in <var>merged path</var> to the <code id="path2d-objects:path2d-9"><a href="#path2d">Path2D</a></code>
   object.</p></li><li><p>Set the <code id="path2d-objects:path2d-10"><a href="#path2d">Path2D</a></code> object's <a href="#need-new-subpath" id="path2d-objects:need-new-subpath">need new subpath</a> flag.</p></li></ol>

  <hr/>

  <p>The <dfn id="dom-path2d-withdata"><code>Path2D(<var>d</var>)</code></dfn>
  constructor, when invoked, must run these steps:</p>

  <ol><li>

    <p>Parse and interpret the <var>d</var> argument according to the SVG specification's
    rules for path data, thus obtaining an SVG path. <a href="https://html.spec.whatwg.org/multipage/references.html#refsSVG">[SVG]</a></p>

    <p class="note">The resulting path could be empty. SVG defines error handling rules for parsing
    and applying path data.</p>

   </li><li><p>Let (<var>x</var>, <var>y</var>) be the last point in the SVG
   path.</p></li><li><p>Create a new <code id="path2d-objects:path2d-11"><a href="#path2d">Path2D</a></code> object and add all the subpaths in the SVG path, if any,
   to that <code id="path2d-objects:path2d-12"><a href="#path2d">Path2D</a></code> object. </p>

   </li><li><p>Create a new subpath in the <code id="path2d-objects:path2d-13"><a href="#path2d">Path2D</a></code> object with (<var>x</var>, <var>y</var>) as the only point in the subpath.</p></li><li><p>Return the <code id="path2d-objects:path2d-14"><a href="#path2d">Path2D</a></code> object as the constructed object.</p></li></ol>

  <hr/>

  <p>The <dfn id="dom-path2d-addpath-2"><code>addPath(<var>b</var>,
  <var>transform</var>)</code></dfn> method, when invoked on a <code id="path2d-objects:path2d-15"><a href="#path2d">Path2D</a></code> object
  <var>a</var>, must run these steps:</p>

  <ol><li><p>If the <code id="path2d-objects:path2d-16"><a href="#path2d">Path2D</a></code> object <var>b</var> has no subpaths, then abort these
   steps.</p></li><li><p>Create a copy of all the subpaths in <var>b</var>. Let this copy be known as <var>c</var>.</p></li><li><p>Let <var>matrix</var> be the result of <a data-x-internal="create-a-dommatrix-from-a-dictionary" href="https://drafts.fxtf.org/geometry/#create-a-dommatrix-from-the-dictionary" id="path2d-objects:create-a-dommatrix-from-a-dictionary">creating a <code>DOMMatrix</code> from a dictionary</a>
   <var>transform</var>, with <var>ignore3D</var> set to true.</p></li><li><p>Transform all the coordinates and lines in <var>c</var> by the transform matrix
   <var>matrix</var>.</p></li><li><p>Let (<var>x</var>, <var>y</var>) be the last point in the last subpath
   of <var>c</var>.</p></li><li><p>Add all the subpaths in <var>c</var> to <var>a</var>.</p></li><li><p>Create a new subpath in <var>a</var> with (<var>x</var>, <var>y</var>) as the only point in the subpath.</p></li></ol>

  
  <h6 id="transformations"><span class="secno">4.12.5.1.7</span> <dfn>Transformations</dfn><a class="self-link" href="#transformations"/></h6><div class="status"><input onclick="toggleStatus(this)" type="button" value="⋰"/><p class="bugs"><strong>Spec bugs:</strong> <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=28333" title="Show on example how a,b,c,d,e,f affect the point position">28333</a></p></div>

  <p>Objects that implement the <code id="transformations:canvastransform"><a href="#canvastransform">CanvasTransform</a></code> interface have a <dfn id="current-transformation-matrix">current
  transformation matrix</dfn>, as well as methods (described in this section) to manipulate it. When
  an object implementing the <code id="transformations:canvastransform-2"><a href="#canvastransform">CanvasTransform</a></code> interface is created, its transformation
  matrix must be initialized to the identity transform.</p>

  <p>The <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix">current transformation matrix</a> is applied to coordinates when creating the
  <a href="#current-default-path" id="transformations:current-default-path">current default path</a>, and when painting text, shapes, and <code id="transformations:path2d"><a href="#path2d">Path2D</a></code>
  objects, on objects implementing the <code id="transformations:canvastransform-3"><a href="#canvastransform">CanvasTransform</a></code> interface.</p>
  

  <p class="note">Most of the API uses <code id="transformations:dommatrix"><a data-x-internal="dommatrix" href="https://drafts.fxtf.org/geometry/#dommatrix">DOMMatrix</a></code> objects rather than this API. This API
  remains mostly for historical reasons.</p>

  
  <p>The transformations must be performed in reverse order.</p>

  <p class="note">For instance, if a scale transformation that doubles the width is applied to the
  canvas, 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> 

  
  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-scale"><a href="#dom-context-2d-scale-2">scale</a></code>(<var>x</var>, <var>y</var>)</dt><dd>

    <p>Changes the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-2">current transformation matrix</a> to apply a scaling transformation
    with the given characteristics.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-rotate"><a href="#dom-context-2d-rotate-2">rotate</a></code>(<var>angle</var>)</dt><dd>

    <p>Changes the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-3">current transformation matrix</a> to apply a rotation transformation
    with the given characteristics. The angle is in radians.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-translate"><a href="#dom-context-2d-translate-2">translate</a></code>(<var>x</var>, <var>y</var>)</dt><dd>

    <p>Changes the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-4">current transformation matrix</a> to apply a translation transformation
    with the given characteristics.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-transform"><a href="#dom-context-2d-transform-2">transform</a></code>(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>e</var>, <var>f</var>)</dt><dd>

    <p>Changes the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-5">current transformation matrix</a> to apply the matrix given by the
    arguments as described below.</p>

   </dd><dt><var>matrix</var> = <var>context</var> . <code id="dom-context-2d-gettransform"><a href="#dom-context-2d-gettransform-2">getTransform</a></code>()</dt><dd>

    <p>Returns a copy of the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-6">current transformation matrix</a>, as a newly created
    <code id="transformations:dommatrix-2"><a data-x-internal="dommatrix" href="https://drafts.fxtf.org/geometry/#dommatrix">DOMMatrix</a></code> object.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-settransform"><a href="#dom-context-2d-settransform-2">setTransform</a></code>(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>e</var>, <var>f</var>)</dt><dd>

    <p>Changes the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-7">current transformation matrix</a> <em>to</em> the matrix given by the
    arguments as described below.</p>

   </dd><dt><var>context</var> . <code id="transformations:dom-context-2d-settransform-2"><a href="#dom-context-2d-settransform-2">setTransform</a></code>(<var>transform</var>)</dt><dd>

    <p>Changes the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-8">current transformation matrix</a> <em>to</em> the matrix represented by
    the passed <code id="transformations:dommatrix2dinit"><a data-x-internal="dommatrix2dinit" href="https://drafts.fxtf.org/geometry/#dictdef-dommatrix2dinit">DOMMatrix2DInit</a></code> dictionary.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-resettransform"><a href="#dom-context-2d-resettransform-2">resetTransform</a></code>()</dt><dd>

    <p>Changes the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-9">current transformation matrix</a> to the identity transform.</p>

   </dd></dl>

  
  <p>The <dfn id="dom-context-2d-scale-2"><code>scale(<var>x</var>, <var>y</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Add the scaling transformation described by the arguments to the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-10">current
   transformation matrix</a>. The <var>x</var> argument represents the scale factor in the
   horizontal direction and the <var>y</var> argument represents the scale factor in the vertical
   direction. The factors are multiples.</p></li></ol>

  <p>The <dfn id="dom-context-2d-rotate-2"><code>rotate(<var>angle</var>)</code></dfn> method,
  when invoked, must run these steps:</p>

  <ol><li><p>If <var>angle</var> is infinite or NaN, then abort these steps.</p></li><li><p>Add the rotation transformation described by the argument to the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-11">current
   transformation matrix</a>. The <var>angle</var> argument represents a clockwise rotation angle
   expressed in radians.</p></li></ol>

  <p>The <dfn id="dom-context-2d-translate-2"><code>translate(<var>x</var>,
  <var>y</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If either of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Add the translation transformation described by the arguments to the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-12">current
   transformation matrix</a>. The <var>x</var> argument represents the translation distance in
   the horizontal direction and the <var>y</var> argument represents the translation distance in the
   vertical direction. The arguments are in coordinate space units.</p></li></ol>

  <p>The <dfn id="dom-context-2d-transform-2"><code>transform(<var>a</var>, <var>b</var>,
  <var>c</var>, <var>d</var>, <var>e</var>, <var>f</var>)</code></dfn> method, when invoked, must
  run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Replace the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-13">current transformation matrix</a> with the result of multiplying the
   current transformation matrix with the matrix described by:</p></li></ol>

  
  <table class="matrix"><tbody><tr><td><var>a</var></td><td><var>c</var></td><td><var>e</var></td></tr><tr><td><var>b</var></td><td><var>d</var></td><td><var>f</var></td></tr><tr><td>0</td><td>0</td><td>1</td></tr></tbody></table>

  <p class="note">The arguments <var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>,
  <var>e</var>, and <var>f</var> are sometimes called <var>m11</var>, <var>m12</var>,
  <var>m21</var>, <var>m22</var>, <var>dx</var>, and <var>dy</var> or <var>m11</var>,
  <var>m21</var>, <var>m12</var>, <var>m22</var>, <var>dx</var>, and <var>dy</var>. Care ought to be
  taken in particular with the order of the second and third arguments (<var>b</var> and
  <var>c</var>) as their order varies from API to API and APIs sometimes use the notation
  <var>m12</var>/<var>m21</var> and sometimes <var>m21</var>/<var>m12</var> for those positions.</p>

  
  <p>The <dfn id="dom-context-2d-gettransform-2"><code>getTransform()</code></dfn> method, when
  invoked, must return a newly created <code id="transformations:dommatrix-3"><a data-x-internal="dommatrix" href="https://drafts.fxtf.org/geometry/#dommatrix">DOMMatrix</a></code> representing a copy of the
  <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-14">current transformation matrix</a> matrix of the context.</p>

  <p class="note">This returned object is not live, so updating it will not affect the
  <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-15">current transformation matrix</a>, and updating the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-16">current transformation
  matrix</a> will not affect an already returned <code id="transformations:dommatrix-4"><a data-x-internal="dommatrix" href="https://drafts.fxtf.org/geometry/#dommatrix">DOMMatrix</a></code>.</p>

  <p>The <dfn id="dom-context-2d-settransform-2"><code>setTransform(<var>a</var>, <var>b</var>,
  <var>c</var>, <var>d</var>, <var>e</var>, <var>f</var>)</code></dfn> method, when invoked, must
  run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Reset the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-17">current transformation matrix</a> to the identity matrix.</p></li><li><p>Invoke the <code><a href="#dom-context-2d-transform-2" id="transformations:dom-context-2d-transform-2">transform</a>(<var>a</var>, <var>b</var>, <var>c</var>,
   <var>d</var>, <var>e</var>, <var>f</var>)</code> method with the same arguments.</p></li></ol>

  <p>The <dfn><code>setTransform(<var>transform</var>)</code></dfn> method, when invoked,
  must reset the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-18">current transformation matrix</a> to the value represented by the result
  of <a data-x-internal="create-a-dommatrix-from-a-dictionary" href="https://drafts.fxtf.org/geometry/#create-a-dommatrix-from-the-dictionary" id="transformations:create-a-dommatrix-from-a-dictionary">creating a <code>DOMMatrix</code> from a
  dictionary</a> <var>transform</var>, with <var>ignore3D</var> set to true.</p>

  <p>The <dfn id="dom-context-2d-resettransform-2"><code>resetTransform()</code></dfn> method,
  when invoked, must reset the <a href="#current-transformation-matrix" id="transformations:current-transformation-matrix-19">current transformation matrix</a> to the identity
  matrix.</p>

  
  <h6 id="image-sources-for-2d-rendering-contexts"><span class="secno">4.12.5.1.8</span> Image sources for 2D rendering contexts<a class="self-link" href="#image-sources-for-2d-rendering-contexts"/></h6>

  <p>Some methods on the <code id="image-sources-for-2d-rendering-contexts:canvasdrawimage"><a href="#canvasdrawimage">CanvasDrawImage</a></code> and <code id="image-sources-for-2d-rendering-contexts:canvasfillstrokestyles"><a href="#canvasfillstrokestyles">CanvasFillStrokeStyles</a></code>
  interfaces take the union type <code id="image-sources-for-2d-rendering-contexts:canvasimagesource"><a href="#canvasimagesource">CanvasImageSource</a></code> as an argument.</p>

  <p>This union type allows objects implementing any of the following interfaces to be used as image
  sources:</p>

  <ul><li><code id="image-sources-for-2d-rendering-contexts:htmlorsvgimageelement"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code> (<code id="image-sources-for-2d-rendering-contexts:the-img-element"><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code> or <a data-x-internal="svg-image" href="https://www.w3.org/TR/SVG11/struct.html#ImageElement" id="image-sources-for-2d-rendering-contexts:svg-image">SVG <code>image</code></a>
   elements)</li><li><code id="image-sources-for-2d-rendering-contexts:htmlvideoelement"><a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement">HTMLVideoElement</a></code> (<code id="image-sources-for-2d-rendering-contexts:the-video-element"><a href="https://html.spec.whatwg.org/multipage/media.html#the-video-element">video</a></code> elements)</li><li><code id="image-sources-for-2d-rendering-contexts:htmlcanvaselement"><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> (<code id="image-sources-for-2d-rendering-contexts:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> elements)</li><li><code id="image-sources-for-2d-rendering-contexts:imagebitmap"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code></li></ul>

  <p class="note">Although not formally specified as such, <a data-x-internal="svg-image" href="https://www.w3.org/TR/SVG11/struct.html#ImageElement" id="image-sources-for-2d-rendering-contexts:svg-image-2">SVG <code>image</code></a>
  elements are expected to be implemented nearly identical to <code id="image-sources-for-2d-rendering-contexts:the-img-element-2"><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code> elements. That is,
  <a data-x-internal="svg-image" href="https://www.w3.org/TR/SVG11/struct.html#ImageElement" id="image-sources-for-2d-rendering-contexts:svg-image-3">SVG <code>image</code></a> elements share the fundamental concepts and features of
  <code id="image-sources-for-2d-rendering-contexts:the-img-element-3"><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code> elements.</p>

  <p class="note">The <code id="image-sources-for-2d-rendering-contexts:imagebitmap-2"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> interface can be created from a number of other
  image-representing types, including <code id="image-sources-for-2d-rendering-contexts:imagedata"><a href="#imagedata">ImageData</a></code>.</p>

  <p>When a user agent is required to <dfn id="check-the-usability-of-the-image-argument">check the usability of the <var>image</var>
  argument</dfn>, where <var>image</var> is a <code id="image-sources-for-2d-rendering-contexts:canvasimagesource-2"><a href="#canvasimagesource">CanvasImageSource</a></code> object, the
  user agent must run these steps, which return either <i>good</i>, <i>bad</i>, or
  <i>aborted</i>:</p>

  <ol><li><p>If <var>image</var> is an <code id="image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-2"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code> object that is in the <a href="https://html.spec.whatwg.org/multipage/images.html#img-error" id="image-sources-for-2d-rendering-contexts:img-error">broken</a> state, then throw an
   <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="image-sources-for-2d-rendering-contexts:invalidstateerror">&quot;<code>InvalidStateError</code>&quot;</a> <code id="image-sources-for-2d-rendering-contexts:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>, return <i>aborted</i>,
   and abort these steps.</p></li><li><p>If <var>image</var> is an <code id="image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-3"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code> object that is not <a href="https://html.spec.whatwg.org/multipage/images.html#img-good" id="image-sources-for-2d-rendering-contexts:img-good">fully decodable</a>, or if <var>image</var> is an
   <code id="image-sources-for-2d-rendering-contexts:htmlvideoelement-2"><a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement">HTMLVideoElement</a></code> object whose <code id="image-sources-for-2d-rendering-contexts:dom-media-readystate-2"><a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate-2">readyState</a></code>
   attribute is either <code id="image-sources-for-2d-rendering-contexts:dom-media-have_nothing"><a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_nothing">HAVE_NOTHING</a></code> or <code id="image-sources-for-2d-rendering-contexts:dom-media-have_metadata"><a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_metadata">HAVE_METADATA</a></code>, then return <i>bad</i> and abort these
   steps.</p></li><li><p>If <var>image</var> is an <code id="image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-4"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code> object with an
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-width" id="image-sources-for-2d-rendering-contexts:intrinsic-width">intrinsic width</a> or <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-height" id="image-sources-for-2d-rendering-contexts:intrinsic-height">intrinsic height</a> (or both) equal to zero, then
   return <i>bad</i> and abort these steps.</p></li><li><p>If <var>image</var> is an <code id="image-sources-for-2d-rendering-contexts:htmlcanvaselement-2"><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> object with either a horizontal
   dimension or a vertical dimension equal to zero, then return <i>bad</i> and abort these
   steps.</p></li><li><p>If <var>image</var> is an <code id="image-sources-for-2d-rendering-contexts:imagebitmap-3"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> object with its
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#detached" id="image-sources-for-2d-rendering-contexts:detached">[[Detached]]</a> internal slot value set to true, then throw an
   <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="image-sources-for-2d-rendering-contexts:invalidstateerror-2">&quot;<code>InvalidStateError</code>&quot;</a> <code id="image-sources-for-2d-rendering-contexts:domexception-2"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>, return <i>aborted</i>,
   and abort these steps.</p></li><li><p>Return <i>good</i>.</p></li></ol>

  <p>When a <code id="image-sources-for-2d-rendering-contexts:canvasimagesource-3"><a href="#canvasimagesource">CanvasImageSource</a></code> object represents an <code id="image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-5"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code>,
  the element's image must be used as the source image.</p>

  <p>Specifically, when a <code id="image-sources-for-2d-rendering-contexts:canvasimagesource-4"><a href="#canvasimagesource">CanvasImageSource</a></code> object represents an animated image in an
  <code id="image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-6"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code>, the user agent must use the default image of the animation
  (the one that the format defines is to be used when animation is not supported or is disabled),
  or, if there is no such image, the first frame of the animation, when rendering the image for
  <code id="image-sources-for-2d-rendering-contexts:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> APIs.</p>

  <p>When a <code id="image-sources-for-2d-rendering-contexts:canvasimagesource-5"><a href="#canvasimagesource">CanvasImageSource</a></code> object represents an <code id="image-sources-for-2d-rendering-contexts:htmlvideoelement-3"><a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement">HTMLVideoElement</a></code>, then
  the frame at the <a href="https://html.spec.whatwg.org/multipage/media.html#current-playback-position" id="image-sources-for-2d-rendering-contexts:current-playback-position">current playback position</a> when the method with the argument is
  invoked must be used as the source image when rendering the image for
  <code id="image-sources-for-2d-rendering-contexts:canvasrenderingcontext2d-2"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> APIs, and the source image's dimensions must be the <a href="https://html.spec.whatwg.org/multipage/media.html#concept-video-intrinsic-width" id="image-sources-for-2d-rendering-contexts:concept-video-intrinsic-width">intrinsic width</a> and <a href="https://html.spec.whatwg.org/multipage/media.html#concept-video-intrinsic-height" id="image-sources-for-2d-rendering-contexts:concept-video-intrinsic-height">intrinsic height</a> of the <a href="https://html.spec.whatwg.org/multipage/media.html#media-resource" id="image-sources-for-2d-rendering-contexts:media-resource">media resource</a>
  (i.e. after any aspect-ratio correction has been applied).</p>

  <p>When a <code id="image-sources-for-2d-rendering-contexts:canvasimagesource-6"><a href="#canvasimagesource">CanvasImageSource</a></code> object represents an <code id="image-sources-for-2d-rendering-contexts:htmlcanvaselement-3"><a href="#htmlcanvaselement">HTMLCanvasElement</a></code>, the
  element's bitmap must be used as the source image.</p>

  <p>When a <code id="image-sources-for-2d-rendering-contexts:canvasimagesource-7"><a href="#canvasimagesource">CanvasImageSource</a></code> object represents an element that is <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="image-sources-for-2d-rendering-contexts:being-rendered">being
  rendered</a> and that element has been resized, the original image data of the source image
  must be used, not the image as it is rendered (e.g. <code id="image-sources-for-2d-rendering-contexts:attr-dim-width"><a href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#attr-dim-width">width</a></code> and
  <code id="image-sources-for-2d-rendering-contexts:attr-dim-height"><a href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#attr-dim-height">height</a></code> attributes on the source element have no effect on how
  the object is interpreted when rendering the image for <code id="image-sources-for-2d-rendering-contexts:canvasrenderingcontext2d-3"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>
  APIs).</p>

  <p>When a <code id="image-sources-for-2d-rendering-contexts:canvasimagesource-8"><a href="#canvasimagesource">CanvasImageSource</a></code> object represents an <code id="image-sources-for-2d-rendering-contexts:imagebitmap-4"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code>, the
  object's bitmap image data must be used as the source image.</p>

  <p><dfn id="the-image-argument-is-not-origin-clean">The <var>image argument</var> is not origin-clean</dfn> if it is an
  <code id="image-sources-for-2d-rendering-contexts:htmlorsvgimageelement-7"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code> or <code id="image-sources-for-2d-rendering-contexts:htmlvideoelement-4"><a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement">HTMLVideoElement</a></code> whose <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin" id="image-sources-for-2d-rendering-contexts:concept-origin">origin</a> is
  not the <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="image-sources-for-2d-rendering-contexts:same-origin">same</a> as the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="image-sources-for-2d-rendering-contexts:concept-settings-object-origin">origin</a> specified by the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="image-sources-for-2d-rendering-contexts:entry-settings-object">entry settings
  object</a>, or if it is an <code id="image-sources-for-2d-rendering-contexts:htmlcanvaselement-4"><a href="#htmlcanvaselement">HTMLCanvasElement</a></code> whose bitmap's <a href="#concept-canvas-origin-clean" id="image-sources-for-2d-rendering-contexts:concept-canvas-origin-clean">origin-clean</a> flag is false.</p>


  <h6 id="fill-and-stroke-styles"><span class="secno">4.12.5.1.9</span> Fill and stroke styles<a class="self-link" href="#fill-and-stroke-styles"/></h6>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-fillstyle"><a href="#dom-context-2d-fillstyle-2">fillStyle</a></code> [ = <var>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 id="fill-and-stroke-styles:canvasgradient"><a href="#canvasgradient">CanvasGradient</a></code> or
    <code id="fill-and-stroke-styles:canvaspattern"><a href="#canvaspattern">CanvasPattern</a></code> object. Invalid values are ignored.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-strokestyle"><a href="#dom-context-2d-strokestyle-2">strokeStyle</a></code> [ = <var>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 id="fill-and-stroke-styles:canvasgradient-2"><a href="#canvasgradient">CanvasGradient</a></code> or
    <code id="fill-and-stroke-styles:canvaspattern-2"><a href="#canvaspattern">CanvasPattern</a></code> object. Invalid values are ignored.</p>

   </dd></dl>

  
  <p>Objects that implement the <code id="fill-and-stroke-styles:canvasfillstrokestyles"><a href="#canvasfillstrokestyles">CanvasFillStrokeStyles</a></code> interface have attributes and
  methods (defined in this section) that control how shapes are treated by the object.</p>

  <p>The <dfn id="dom-context-2d-fillstyle-2"><code>fillStyle</code></dfn> attribute represents the
  color or style to use inside shapes, and the <dfn id="dom-context-2d-strokestyle-2"><code>strokeStyle</code></dfn> attribute represents the color
  or style to use for the lines around the shapes.</p>

  <p>Both attributes can be either strings, <code id="fill-and-stroke-styles:canvasgradient-3"><a href="#canvasgradient">CanvasGradient</a></code>s, or
  <code id="fill-and-stroke-styles:canvaspattern-3"><a href="#canvaspattern">CanvasPattern</a></code>s. On setting, strings must be <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#parsed-as-a-css-color-value" id="fill-and-stroke-styles:parsed-as-a-css-color-value">parsed as CSS &lt;color&gt; values</a> and the color assigned, and
  <code id="fill-and-stroke-styles:canvasgradient-4"><a href="#canvasgradient">CanvasGradient</a></code> and <code id="fill-and-stroke-styles:canvaspattern-4"><a href="#canvaspattern">CanvasPattern</a></code> objects must be assigned themselves. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSSCOLOR">[CSSCOLOR]</a> If the value is a string but cannot be <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#parsed-as-a-css-color-value" id="fill-and-stroke-styles:parsed-as-a-css-color-value-2">parsed as a CSS
  &lt;color&gt; value</a>, then it must be ignored, and the attribute must retain its previous
  value.

  If the new value is a <code id="fill-and-stroke-styles:canvaspattern-5"><a href="#canvaspattern">CanvasPattern</a></code> object that is marked as <a href="#concept-canvas-pattern-not-origin-clean" id="fill-and-stroke-styles:concept-canvas-pattern-not-origin-clean">not origin-clean</a>, then the
  <code id="fill-and-stroke-styles:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>'s <a href="#concept-canvas-origin-clean" id="fill-and-stroke-styles:concept-canvas-origin-clean">origin-clean</a> flag must be set to false.

  </p>

  <p>When set to a <code id="fill-and-stroke-styles:canvaspattern-6"><a href="#canvaspattern">CanvasPattern</a></code> or <code id="fill-and-stroke-styles:canvasgradient-5"><a href="#canvasgradient">CanvasGradient</a></code> object, the assignment
  is <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#live" id="fill-and-stroke-styles:live">live</a>, 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="#serialisation-of-a-color" id="fill-and-stroke-styles:serialisation-of-a-color">serialization of the color</a> must be returned. Otherwise, if it is not a color but a
  <code id="fill-and-stroke-styles:canvasgradient-6"><a href="#canvasgradient">CanvasGradient</a></code> or <code id="fill-and-stroke-styles:canvaspattern-7"><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="serialisation-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 &quot;#&quot; 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 <a data-x-internal="lowercase-ascii-hex-digits" href="https://infra.spec.whatwg.org/#ascii-lower-hex-digit" id="fill-and-stroke-styles:lowercase-ascii-hex-digits">ASCII lower hex digits</a>. Otherwise, the color value has alpha less than
  1.0, and the string is the color value in the CSS <code>rgba()</code>
  functional-notation format: the literal string &quot;<code>rgba</code>&quot; (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 <a data-x-internal="ascii-digits" href="https://infra.spec.whatwg.org/#ascii-digit" id="fill-and-stroke-styles:ascii-digits">ASCII digits</a> 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 <a data-x-internal="ascii-digits" href="https://infra.spec.whatwg.org/#ascii-digit" id="fill-and-stroke-styles:ascii-digits-2">ASCII digits</a> representing the fractional part of
  the alpha, and finally a U+0029
  RIGHT PARENTHESIS. User agents must express the fractional part of the alpha value, if any, with
  the level of precision necessary for the alpha value, when reparsed, to be interpreted as the same
  alpha value.</p>
  

  <p>When the context is created, the <code id="fill-and-stroke-styles:dom-context-2d-fillstyle-2"><a href="#dom-context-2d-fillstyle-2">fillStyle</a></code> and <code id="fill-and-stroke-styles:dom-context-2d-strokestyle-2"><a href="#dom-context-2d-strokestyle-2">strokeStyle</a></code> attributes
  must initially have the string value <code>#000000</code>.</p>

  <p>When the value is a color, it must not be affected by the transformation matrix when used to
  draw on bitmaps.</p> 

  
  <hr/>

  <p>There are two types of gradients, linear gradients and radial gradients, both represented by
  objects implementing the opaque <code id="fill-and-stroke-styles:canvasgradient-7"><a href="#canvasgradient">CanvasGradient</a></code> interface.</p>

  <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. 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.</p>

  <dl class="domintro"><dt><var>gradient</var> . <code id="dom-canvasgradient-addcolorstop"><a href="#dom-canvasgradient-addcolorstop-2">addColorStop</a></code>(<var>offset</var>, <var>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 <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="fill-and-stroke-styles:indexsizeerror">&quot;<code>IndexSizeError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if the offset
    is out of range. Throws a <a data-x-internal="syntaxerror" href="https://heycam.github.io/webidl/#syntaxerror" id="fill-and-stroke-styles:syntaxerror">&quot;<code>SyntaxError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception-2"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if
    the color cannot be parsed.</p>

   </dd><dt><var>gradient</var> = <var>context</var> . <code id="dom-context-2d-createlineargradient"><a href="#dom-context-2d-createlineargradient-2">createLinearGradient</a></code>(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>)</dt><dd>

    <p>Returns a <code id="fill-and-stroke-styles:canvasgradient-8"><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>

   </dd><dt><var>gradient</var> = <var>context</var> . <code id="dom-context-2d-createradialgradient"><a href="#dom-context-2d-createradialgradient-2">createRadialGradient</a></code>(<var>x0</var>, <var>y0</var>, <var>r0</var>, <var>x1</var>, <var>y1</var>, <var>r1</var>)</dt><dd>

    <p>Returns a <code id="fill-and-stroke-styles:canvasgradient-9"><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 either of the radii are negative, throws an
    <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="fill-and-stroke-styles:indexsizeerror-2">&quot;<code>IndexSizeError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception-3"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> exception.</p>

   </dd></dl>

  
  <p>The <dfn id="dom-canvasgradient-addcolorstop-2"><code>addColorStop(<var>offset</var>,
  <var>color</var>)</code></dfn> method on the <code id="fill-and-stroke-styles:canvasgradient-10"><a href="#canvasgradient">CanvasGradient</a></code> interface adds a new stop
  to a gradient. If the <var>offset</var> is less than 0 or greater than 1 then an
  <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="fill-and-stroke-styles:indexsizeerror-3">&quot;<code>IndexSizeError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception-4"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> must be thrown. If the
  <var>color</var> cannot be <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#parsed-as-a-css-color-value" id="fill-and-stroke-styles:parsed-as-a-css-color-value-3">parsed as a CSS &lt;color&gt; value</a>, then a
  <a data-x-internal="syntaxerror" href="https://heycam.github.io/webidl/#syntaxerror" id="fill-and-stroke-styles:syntaxerror-2">&quot;<code>SyntaxError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception-5"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> must be thrown. Otherwise, the
  gradient must have a new stop placed, at offset <var>offset</var> relative to the whole gradient,
  and with the color obtained by <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#parsed-as-a-css-color-value" id="fill-and-stroke-styles:parsed-as-a-css-color-value-4">parsing
  <var>color</var> as a CSS &lt;color&gt; value</a>. If multiple stops are added at the same
  offset on a gradient, then 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-2"><code>createLinearGradient(<var>x0</var>,
  <var>y0</var>, <var>x1</var>, <var>y1</var>)</code></dfn> method takes four arguments that
  represent the start point (<var>x0</var>, <var>y0</var>) and end point (<var>x1</var>,
  <var>y1</var>) of the gradient. The method, when invoked, must return a linear
  <code id="fill-and-stroke-styles:canvasgradient-11"><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" id="fill-and-stroke-styles:transformations">current transformation matrix</a> when rendering.</p>

  <p>If <var>x0</var> = <var>x1</var> and <span><var>y0</var> = <var>y1</var></span>, then the linear
  gradient must paint nothing.</p>

  <p>The <dfn id="dom-context-2d-createradialgradient-2"><code>createRadialGradient(<var>x0</var>,
  <var>y0</var>, <var>r0</var>, <var>x1</var>, <var>y1</var>, <var>r1</var>)</code></dfn> method
  takes six arguments, the first three representing the start circle with origin (<var>x0</var>,
  <var>y0</var>) and radius <var>r0</var>, and the last three representing the end circle with
  origin (<var>x1</var>, <var>y1</var>) and radius <var>r1</var>. The values are in coordinate space
  units. If either of <var>r0</var> or <var>r1</var> are negative, then an
  <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="fill-and-stroke-styles:indexsizeerror-4">&quot;<code>IndexSizeError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception-6"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> must be thrown. Otherwise,
  the method, when invoked, must return a radial <code id="fill-and-stroke-styles:canvasgradient-12"><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 <var>x<sub>0</sub></var> = <var>x<sub>1</sub></var> and <var>y<sub>0</sub></var> = <var>y<sub>1</sub></var> and <var>r<sub>0</sub></var> = <var>r<sub>1</sub></var>, then the radial gradient must
   paint nothing. Abort these steps.</p></li><li>

    <p>Let <span>x(<var>ω</var>) = (<var>x<sub>1</sub></var>-<var>x<sub>0</sub></var>)<var>ω</var> + <var>x<sub>0</sub></var></span></p>

    <p>Let <span>y(<var>ω</var>) = (<var>y<sub>1</sub></var>-<var>y<sub>0</sub></var>)<var>ω</var> + <var>y<sub>0</sub></var></span></p>

    <p>Let <span>r(<var>ω</var>) = (<var>r<sub>1</sub></var>-<var>r<sub>0</sub></var>)<var>ω</var> + <var>r<sub>0</sub></var></span></p>

    <p>Let the color at <var>ω</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>ω</var> where <span>r(<var>ω</var>) &gt; 0</span>, starting with the value of <var>ω</var> nearest to positive infinity and ending with the value of <var>ω</var> nearest to negative infinity, draw the circumference of the circle with
   radius <span>r(<var>ω</var>)</span> at position (<span>x(<var>ω</var>)</span>, <span>y(<var>ω</var>)</span>), with the
   color at <var>ω</var>, but only painting on the parts of the bitmap that have not
   yet been painted on by earlier circles in this step for this rendering of the gradient.</p></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 resulting radial gradient must then be transformed as described by the <a href="#transformations" id="fill-and-stroke-styles:transformations-2">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>

  
  <hr/>

  <p>Patterns are represented by objects implementing the opaque <code id="fill-and-stroke-styles:canvaspattern-8"><a href="#canvaspattern">CanvasPattern</a></code>
  interface.</p>

  <dl class="domintro"><dt><var>pattern</var> = <var>context</var> . <code id="dom-context-2d-createpattern"><a href="#dom-context-2d-createpattern-2">createPattern</a></code>(<var>image</var>, <var>repetition</var>)</dt><dd>

    <p>Returns a <code id="fill-and-stroke-styles:canvaspattern-9"><a href="#canvaspattern">CanvasPattern</a></code> object that uses the given image and repeats in the
    direction(s) given by the <var>repetition</var> argument.</p>

    <p>The allowed values for <var>repetition</var> are <code>repeat</code> (both
    directions), <code>repeat-x</code> (horizontal only), <code>repeat-y</code>
    (vertical only), and <code>no-repeat</code> (neither). If the <var>repetition</var> argument is empty, the value <code>repeat</code> is used.</p>

    <p>If the image isn't yet fully decoded, then nothing is drawn. If the image is a canvas with no
    data, throws an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="fill-and-stroke-styles:invalidstateerror">&quot;<code>InvalidStateError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception-7"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.</p>

   </dd><dt><var>pattern</var> . <code id="dom-canvaspattern-settransform"><a href="#dom-canvaspattern-settransform-2">setTransform</a></code>(<var>transform</var>)</dt><dd>

    <p>Sets the transformation matrix that will be used when rendering the pattern during a fill or
    stroke painting operation.</p>

   </dd></dl>

  
  <p>The <dfn id="dom-context-2d-createpattern-2"><code>createPattern(<var>image</var>,
  <var>repetition</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>Let <var>image</var> be the first argument and <var>repetition</var> be
   the second argument.</p></li><li><p><a href="#check-the-usability-of-the-image-argument" id="fill-and-stroke-styles:check-the-usability-of-the-image-argument">Check the usability of the <var>image</var> argument</a>. If this
   returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
   abort these steps. If it returns <i>bad</i>, then return null and abort these steps. Otherwise it
   returns <i>good</i>; continue with these steps.</p></li><li><p>If <var>repetition</var> is the empty string, then set it to &quot;<code>repeat</code>&quot;.</p>

   </li><li><p>If <var>repetition</var> is not a <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitive" id="fill-and-stroke-styles:case-sensitive">case-sensitive</a> match for one of
   &quot;<code>repeat</code>&quot;, &quot;<code>repeat-x</code>&quot;, &quot;<code>repeat-y</code>&quot;, or &quot;<code>no-repeat</code>&quot;, then throw a
   <a data-x-internal="syntaxerror" href="https://heycam.github.io/webidl/#syntaxerror" id="fill-and-stroke-styles:syntaxerror-3">&quot;<code>SyntaxError</code>&quot;</a> <code id="fill-and-stroke-styles:domexception-8"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these steps.</p></li><li><p>Create a new <code id="fill-and-stroke-styles:canvaspattern-10"><a href="#canvaspattern">CanvasPattern</a></code> object with the image <var>image</var>
   and the repetition behavior given by <var>repetition</var>.</p></li><li><p>If <a href="#the-image-argument-is-not-origin-clean" id="fill-and-stroke-styles:the-image-argument-is-not-origin-clean">the <var>image argument</var> is not origin-clean</a>, then mark the
   <code id="fill-and-stroke-styles:canvaspattern-11"><a href="#canvaspattern">CanvasPattern</a></code> object as <dfn id="concept-canvas-pattern-not-origin-clean">not
   origin-clean</dfn>.</p></li><li><p>Return the <code id="fill-and-stroke-styles:canvaspattern-12"><a href="#canvaspattern">CanvasPattern</a></code> object.</p></li></ol>

  <p>Modifying the <var>image</var> used when creating a <code id="fill-and-stroke-styles:canvaspattern-13"><a href="#canvaspattern">CanvasPattern</a></code> object
  after calling the <code id="fill-and-stroke-styles:dom-context-2d-createpattern-2"><a href="#dom-context-2d-createpattern-2">createPattern()</a></code> method must
  not affect the pattern(s) rendered by the <code id="fill-and-stroke-styles:canvaspattern-14"><a href="#canvaspattern">CanvasPattern</a></code> object.</p>

  <p>Patterns have a transformation matrix, which controls how the pattern is used when it is
  painted. Initially, a pattern's transformation matrix must be the identity transform.</p>

  <p>The <dfn id="dom-canvaspattern-settransform-2"><code>setTransform(<var>transform</var>)</code></dfn> method,
  when invoked, must reset the pattern's transformation matrix to the value represented by the
  result of <a data-x-internal="create-a-dommatrix-from-a-dictionary" href="https://drafts.fxtf.org/geometry/#create-a-dommatrix-from-the-dictionary" id="fill-and-stroke-styles:create-a-dommatrix-from-a-dictionary">creating a <code>DOMMatrix</code>
  from a dictionary</a> <var>transform</var>, with <var>ignore3D</var> set to true.</p>

  <p>When a pattern is to be rendered within an area, the user agent must run the following steps to
  determine what is rendered:</p>

  <ol><li><p>Create an infinite transparent black bitmap.</p></li><li>

    <p>Place a copy of the image on the bitmap, anchored such that its top left corner is at the
    origin of the coordinate space, with one coordinate space unit per <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="fill-and-stroke-styles:'px'">CSS
    pixel</a> of the image, then place repeated copies of this image horizontally to the left and
    right, if the repetition behavior is &quot;<code>repeat-x</code>&quot;, or vertically up and
    down, if the repetition behavior is &quot;<code>repeat-y</code>&quot;, or in all four
    directions all over the bitmap, if the repetition behavior is &quot;<code>repeat</code>&quot;.</p>

    <p>If the original image data is a bitmap image, then the value painted at a point in the area
    of the repetitions is computed by filtering the original image data. When scaling up, if the
    <code id="fill-and-stroke-styles:dom-context-2d-imagesmoothingenabled-2"><a href="#dom-context-2d-imagesmoothingenabled-2">imageSmoothingEnabled</a></code> attribute is
    set to false, then the image must be rendered using nearest-neighbor interpolation. Otherwise,
    the user agent may use any filtering algorithm (for example bilinear interpolation or
    nearest-neighbor). User agents which support multiple filtering algorithms may use the value of
    the <code id="fill-and-stroke-styles:dom-context-2d-imagesmoothingquality-2"><a href="#dom-context-2d-imagesmoothingquality-2">imageSmoothingQuality</a></code> attribute
    to guide the choice of filtering algorithm. When such a 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 the pattern's repetition behavior.)</p> 

   </li><li><p>Transform the resulting bitmap according to the pattern's transformation matrix.</p></li><li><p>Transform the resulting bitmap again, this time according to the <a href="#transformations" id="fill-and-stroke-styles:transformations-3">current transformation matrix</a>.</p></li><li><p>Replace any part of the image outside the area in which the pattern is to be rendered with
   transparent black.</p></li><li><p>The resulting bitmap is what is to be rendered, with the same origin and same
   scale.</p></li></ol>

  <hr/>

  <p>If a radial gradient or repeated pattern is used when the transformation matrix is singular,
  then the resulting style must be transparent black (otherwise the gradient or pattern would be
  collapsed to a point or line, leaving the other pixels undefined). Linear gradients and solid
  colors always define all points even with singular transformation matrices.</p>

  
  <h6 id="drawing-rectangles-to-the-bitmap"><span class="secno">4.12.5.1.10</span> Drawing rectangles to the bitmap<a class="self-link" href="#drawing-rectangles-to-the-bitmap"/></h6>

  <p>Objects that implement the <code id="drawing-rectangles-to-the-bitmap:canvasrect"><a href="#canvasrect">CanvasRect</a></code> interface provide the following methods for
  immediately drawing rectangles to the bitmap. The methods each take four arguments; the first two
  give the <var>x</var> and <var>y</var> coordinates of the top left of the rectangle, and the
  second two give the width <var>w</var> and height <var>h</var> of the rectangle, respectively.</p>

  
  <p>The <a href="#transformations" id="drawing-rectangles-to-the-bitmap:transformations">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>(<var>x</var>, <var>y</var>)</span>, <span>(<var>x</var>+<var>w</var>, <var>y</var>)</span>, <span>(<var>x</var>+<var>w</var>, <var>y</var>+<var>h</var>)</span>, <span>(<var>x</var>, <var>y</var>+<var>h</var>)</span>.</p>

  <p>Shapes are painted without affecting the <a href="#current-default-path" id="drawing-rectangles-to-the-bitmap:current-default-path">current default path</a>, and are subject to
  the <a href="#clipping-region" id="drawing-rectangles-to-the-bitmap:clipping-region">clipping region</a>, and, with the exception of <code id="drawing-rectangles-to-the-bitmap:dom-context-2d-clearrect-2"><a href="#dom-context-2d-clearrect-2">clearRect()</a></code>, also <a href="#shadows" id="drawing-rectangles-to-the-bitmap:shadows">shadow
  effects</a>, <a href="#dom-context-2d-globalalpha-2" id="drawing-rectangles-to-the-bitmap:dom-context-2d-globalalpha-2">global alpha</a>, and <a href="#dom-context-2d-globalcompositeoperation-2" id="drawing-rectangles-to-the-bitmap:dom-context-2d-globalcompositeoperation-2">global composition operators</a>.</p>

  
  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-clearrect"><a href="#dom-context-2d-clearrect-2">clearRect</a></code>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</dt><dd>

    <p>Clears all pixels on the bitmap in the given rectangle to transparent black.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-fillrect"><a href="#dom-context-2d-fillrect-2">fillRect</a></code>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</dt><dd>

    <p>Paints the given rectangle onto the bitmap, using the current fill style.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-strokerect"><a href="#dom-context-2d-strokerect-2">strokeRect</a></code>(<var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</dt><dd>

    <p>Paints the box that outlines the given rectangle onto the bitmap, using the current stroke
    style.</p>

   </dd></dl>

  
  <p>The <dfn id="dom-context-2d-clearrect-2"><code>clearRect(<var>x</var>, <var>y</var>,
  <var>w</var>, <var>h</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Let <var>pixels</var> be the set of pixels in the specified rectangle that also
   intersect the current <a href="#clipping-region" id="drawing-rectangles-to-the-bitmap:clipping-region-2">clipping region</a>.</p></li><li><p>Clear the pixels in <var>pixels</var> to a fully transparent black, erasing any
   previous image.</p></li></ol>

  <p class="note">If either height or width are zero, this method has no effect, since the set of
  pixels would be empty.</p>

  <p>The <dfn id="dom-context-2d-fillrect-2"><code>fillRect(<var>x</var>, <var>y</var>,
  <var>w</var>, <var>h</var>)</code></dfn> method, when invoked, must must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>If either <var>w</var> or <var>h</var> are zero, then abort these steps.</p></li><li><p>Paint the specified rectangular area using the <code id="drawing-rectangles-to-the-bitmap:dom-context-2d-fillstyle-2"><a href="#dom-context-2d-fillstyle-2">fillStyle</a></code>.</p>
  </li></ol>

  <p>The <dfn id="dom-context-2d-strokerect-2"><code>strokeRect(<var>x</var>, <var>y</var>,
  <var>w</var>, <var>h</var>)</code></dfn> method, when invoked, must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Take the result of <a href="#trace-a-path" id="drawing-rectangles-to-the-bitmap:trace-a-path">tracing the path</a> described below,
   using the <code id="drawing-rectangles-to-the-bitmap:canvaspathdrawingstyles"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface's line styles, and fill it with the
   <code id="drawing-rectangles-to-the-bitmap:dom-context-2d-strokestyle-2"><a href="#dom-context-2d-strokestyle-2">strokeStyle</a></code>.</p></li></ol>

  <p>If both <var>w</var> and <var>h</var> are zero, the path has a single subpath
  with just one point (<var>x</var>, <var>y</var>), and no lines, and this method
  thus has no effect (the <a href="#trace-a-path" id="drawing-rectangles-to-the-bitmap:trace-a-path-2">trace a path</a> algorithm returns an empty path in that
  case).</p>

  <p>If just one of either <var>w</var> or <var>h</var> is zero, then the path has
  a single subpath consisting of two points, with coordinates (<var>x</var>, <var>y</var>) and (<var>x</var>+<var>w</var>, <var>y</var>+<var>h</var>), in that order, connected by a single straight line.</p>

  <p>Otherwise, the path has a single subpath consisting of four points, with coordinates (<span><var>x</var></span>, <var>y</var>), (<span><var>x</var>+<var>w</var></span>, <var>y</var>), (<var>x</var>+<var>w</var>,
  <var>y</var>+<var>h</var>), and (<var>x</var>, <var>y</var>+<var>h</var>),
  connected to each other in that order by straight lines.</p>

  
  <h6 id="drawing-text-to-the-bitmap"><span class="secno">4.12.5.1.11</span> Drawing text to the bitmap<a class="self-link" href="#drawing-text-to-the-bitmap"/></h6><div class="status"><input onclick="toggleStatus(this)" type="button" value="⋰"/><p class="support"><strong>Support:</strong> canvas-text<span class="and_chr yes"><span>Chrome for Android</span> <span>59+</span></span><span class="chrome yes"><span>Chrome</span> <span>4+</span></span><span class="and_uc yes"><span>UC Browser for Android</span> <span>11.4+</span></span><span class="ios_saf yes"><span>iOS Safari</span> <span>3.2+</span></span><span class="firefox yes"><span>Firefox</span> <span>3.5+</span></span><span class="ie yes"><span>IE</span> <span>9+</span></span><span class="samsung yes"><span>Samsung Internet</span> <span>4+</span></span><span class="op_mini no"><span>Opera Mini</span> <span>None</span></span><span class="safari yes"><span>Safari</span> <span>4+</span></span><span class="android yes"><span>Android Browser</span> <span>2.1+</span></span><span class="opera yes"><span>Opera</span> <span>10.5+</span></span><span class="edge yes"><span>Edge</span> <span>12+</span></span></p><p class="caniuse">Source: <a href="https://caniuse.com/#feat=canvas-text">caniuse.com</a></p></div>

  <dl class="domintro" id="text-0"><dt><var>context</var> . <code id="dom-context-2d-filltext"><a href="#dom-context-2d-filltext-2">fillText</a></code>(<var>text</var>, <var>x</var>, <var>y</var> [, <var>maxWidth</var> ] )</dt><dt><var>context</var> . <code id="dom-context-2d-stroketext"><a href="#dom-context-2d-stroketext-2">strokeText</a></code>(<var>text</var>, <var>x</var>, <var>y</var> [, <var>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>metrics</var> = <var>context</var> . <code id="dom-context-2d-measuretext"><a href="#dom-context-2d-measuretext-2">measureText</a></code>(<var>text</var>)</dt><dd>

    <p>Returns a <code id="drawing-text-to-the-bitmap:textmetrics"><a href="#textmetrics">TextMetrics</a></code> object with the metrics of the given text in the current
    font.</p>

   </dd><dt><var>metrics</var> . <code id="dom-textmetrics-width"><a href="#dom-textmetrics-width-2">width</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-actualboundingboxleft"><a href="#dom-textmetrics-actualboundingboxleft-2">actualBoundingBoxLeft</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-actualboundingboxright"><a href="#dom-textmetrics-actualboundingboxright-2">actualBoundingBoxRight</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-fontboundingboxascent"><a href="#dom-textmetrics-fontboundingboxascent-2">fontBoundingBoxAscent</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-fontboundingboxdescent"><a href="#dom-textmetrics-fontboundingboxdescent-2">fontBoundingBoxDescent</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-actualboundingboxascent"><a href="#dom-textmetrics-actualboundingboxascent-2">actualBoundingBoxAscent</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-actualboundingboxdescent"><a href="#dom-textmetrics-actualboundingboxdescent-2">actualBoundingBoxDescent</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-emheightascent"><a href="#dom-textmetrics-emheightascent-2">emHeightAscent</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-emheightdescent"><a href="#dom-textmetrics-emheightdescent-2">emHeightDescent</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-hangingbaseline"><a href="#dom-textmetrics-hangingbaseline-2">hangingBaseline</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-alphabeticbaseline"><a href="#dom-textmetrics-alphabeticbaseline-2">alphabeticBaseline</a></code></dt><dt><var>metrics</var> . <code id="dom-textmetrics-ideographicbaseline"><a href="#dom-textmetrics-ideographicbaseline-2">ideographicBaseline</a></code></dt><dd>

    <p>Returns the measurement described below.</p>

   </dd></dl>

  
  <p>Objects that implement the <code id="drawing-text-to-the-bitmap:canvastext"><a href="#canvastext">CanvasText</a></code> interface provide the following methods for
  rendering text.</p>

  <p>The <dfn id="dom-context-2d-filltext-2"><code>fillText()</code></dfn> and <dfn id="dom-context-2d-stroketext-2"><code>strokeText()</code></dfn> methods take three or four arguments,
  <var>text</var>, <var>x</var>, <var>y</var>, and optionally <var>maxWidth</var>, and render the
  given <var>text</var> at the given (<var>x</var>, <var>y</var>) coordinates ensuring that the text
  isn't wider than <var>maxWidth</var> if specified, using the current <code id="drawing-text-to-the-bitmap:dom-context-2d-font-2"><a href="#dom-context-2d-font-2">font</a></code>, <code id="drawing-text-to-the-bitmap:dom-context-2d-textalign-2"><a href="#dom-context-2d-textalign-2">textAlign</a></code>, and <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> values. Specifically, when the methods
  are invoked, the user agent must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p>Run the <a href="#text-preparation-algorithm" id="drawing-text-to-the-bitmap:text-preparation-algorithm">text preparation algorithm</a>, passing it <var>text</var>, the object
   implementing the <code id="drawing-text-to-the-bitmap:canvastext-2"><a href="#canvastext">CanvasText</a></code> interface, and, if the <var>maxWidth</var> argument was
   provided, that argument. Let <var>glyphs</var> be the result.</p>

   </li><li><p>Move all the shapes in <var>glyphs</var> to the right by <var>x</var>
   <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'">CSS pixels</a> and down by <var>y</var> <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-2">CSS
   pixels</a>.</p></li><li>

    <p>Paint the shapes given in <var>glyphs</var>, as transformed by the <a href="#transformations" id="drawing-text-to-the-bitmap:transformations">current transformation matrix</a>, with each <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-3">CSS pixel</a> in the coordinate space of <var>glyphs</var> mapped to one
    coordinate space unit.</p>

    <p>For <code id="drawing-text-to-the-bitmap:dom-context-2d-filltext-2"><a href="#dom-context-2d-filltext-2">fillText()</a></code>, <code id="drawing-text-to-the-bitmap:dom-context-2d-fillstyle-2"><a href="#dom-context-2d-fillstyle-2">fillStyle</a></code> must be applied to the shapes and <code id="drawing-text-to-the-bitmap:dom-context-2d-strokestyle-2"><a href="#dom-context-2d-strokestyle-2">strokeStyle</a></code> must be ignored. For <code id="drawing-text-to-the-bitmap:dom-context-2d-stroketext-2"><a href="#dom-context-2d-stroketext-2">strokeText()</a></code>, the reverse holds: <code id="drawing-text-to-the-bitmap:dom-context-2d-strokestyle-2-2"><a href="#dom-context-2d-strokestyle-2">strokeStyle</a></code> must be applied to the result of <a href="#trace-a-path" id="drawing-text-to-the-bitmap:trace-a-path">tracing</a> the shapes using the object implementing the
    <code id="drawing-text-to-the-bitmap:canvastext-3"><a href="#canvastext">CanvasText</a></code> interface for the line styles, and <code id="drawing-text-to-the-bitmap:dom-context-2d-fillstyle-2-2"><a href="#dom-context-2d-fillstyle-2">fillStyle</a></code> must be ignored.</p>

    <p>These shapes are painted without affecting the current path, and are subject to <a href="#shadows" id="drawing-text-to-the-bitmap:shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha-2" id="drawing-text-to-the-bitmap:dom-context-2d-globalalpha-2">global
    alpha</a>, the <a href="#clipping-region" id="drawing-text-to-the-bitmap:clipping-region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation-2" id="drawing-text-to-the-bitmap:dom-context-2d-globalcompositeoperation-2">global composition operators</a>.</p>

   </li></ol>


  <p>The <dfn id="dom-context-2d-measuretext-2"><code>measureText()</code></dfn> method takes one
  argument, <var>text</var>. When the method is invoked, the user agent must run the
  <a href="#text-preparation-algorithm" id="drawing-text-to-the-bitmap:text-preparation-algorithm-2">text preparation algorithm</a>, passing it <var>text</var> and the object implementing
  the <code id="drawing-text-to-the-bitmap:canvastext-4"><a href="#canvastext">CanvasText</a></code> interface, and then using the returned <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="drawing-text-to-the-bitmap:inline-box">inline box</a> must
  create a new <code id="drawing-text-to-the-bitmap:textmetrics-2"><a href="#textmetrics">TextMetrics</a></code> object with its attributes set as described in the following
  list.

  If doing these measurements requires using a font that has an <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin" id="drawing-text-to-the-bitmap:concept-origin">origin</a> that is not the
  <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="drawing-text-to-the-bitmap:same-origin">same</a> as that of the <code id="drawing-text-to-the-bitmap:document"><a href="https://html.spec.whatwg.org/multipage/dom.html#document">Document</a></code> object that owns the
  <code id="drawing-text-to-the-bitmap:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element (even if &quot;using a font&quot; means just checking if that font has a
  particular glyph in it before falling back to another font), then the method, when invoked, must
  throw a <a data-x-internal="securityerror" href="https://heycam.github.io/webidl/#securityerror" id="drawing-text-to-the-bitmap:securityerror">&quot;<code>SecurityError</code>&quot;</a> <code id="drawing-text-to-the-bitmap:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.

  Otherwise, it must return the new <code id="drawing-text-to-the-bitmap:textmetrics-3"><a href="#textmetrics">TextMetrics</a></code> object.
  <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSS">[CSS]</a>
  <a class="fingerprint" href="https://html.spec.whatwg.org/multipage/introduction.html#fingerprinting-vector" id="drawing-text-to-the-bitmap:fingerprinting-vector" title="There is a potential fingerprinting vector here."><img alt="(This is a fingerprinting vector.)" height="64" src="https://html.spec.whatwg.org/images/fingerprint.png" width="46"/></a>
  </p>

  
  <dl><dt><dfn id="dom-textmetrics-width-2"><code>width</code></dfn> attribute</dt><dd><p>The width of that <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="drawing-text-to-the-bitmap:inline-box-2">inline box</a>, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-4">CSS pixels</a>. (The
   text's advance width.)</p></dd><dt><dfn id="dom-textmetrics-actualboundingboxleft-2"><code>actualBoundingBoxLeft</code></dfn> attribute</dt><dd>

    <p>The distance parallel to the baseline from the alignment point given by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textalign-2-2"><a href="#dom-context-2d-textalign-2">textAlign</a></code> attribute to the left side of the bounding
    rectangle of the given text, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-5">CSS pixels</a>; positive numbers
    indicating a distance going left from the given alignment point.

    </p><p class="note">The sum of this value and the next (<code id="drawing-text-to-the-bitmap:dom-textmetrics-actualboundingboxright-2"><a href="#dom-textmetrics-actualboundingboxright-2">actualBoundingBoxRight</a></code>) can be wider than
    the width of the <a data-x-internal="inline-box" href="https://drafts.csswg.org/css2/visuren.html#inline-box" id="drawing-text-to-the-bitmap:inline-box-3">inline box</a> (<code id="drawing-text-to-the-bitmap:dom-textmetrics-width-2"><a href="#dom-textmetrics-width-2">width</a></code>), in
    particular with slanted fonts where characters overhang their advance width.</p>

   </dd><dt><dfn id="dom-textmetrics-actualboundingboxright-2"><code>actualBoundingBoxRight</code></dfn> attribute</dt><dd>

    <p>The distance parallel to the baseline from the alignment point given by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textalign-2-3"><a href="#dom-context-2d-textalign-2">textAlign</a></code> attribute to the right side of the bounding
    rectangle of the given text, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-6">CSS pixels</a>; positive numbers
    indicating a distance going right from the given alignment point.</p>

   </dd><dt><dfn id="dom-textmetrics-fontboundingboxascent-2"><code>fontBoundingBoxAscent</code></dfn> attribute</dt><dd>

    <p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-2"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the top of the highest
    bounding rectangle of all the fonts used to render the text, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-7">CSS
    pixels</a>; positive numbers indicating a distance going up from the given baseline.</p>

    <p class="note">This value and the next are useful when rendering a background that have to have
    a consistent height even if the exact text being rendered changes. The <code id="drawing-text-to-the-bitmap:dom-textmetrics-actualboundingboxascent-2"><a href="#dom-textmetrics-actualboundingboxascent-2">actualBoundingBoxAscent</a></code> attribute (and
    its corresponding attribute for the descent) are useful when drawing a bounding box around
    specific text.</p>

   </dd><dt><dfn id="dom-textmetrics-fontboundingboxdescent-2"><code>fontBoundingBoxDescent</code></dfn> attribute</dt><dd><p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-3"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the bottom of the lowest
   bounding rectangle of all the fonts used to render the text, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-8">CSS
   pixels</a>; positive numbers indicating a distance going down from the given
   baseline.</p></dd><dt><dfn id="dom-textmetrics-actualboundingboxascent-2"><code>actualBoundingBoxAscent</code></dfn> attribute</dt><dd>

    <p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-4"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the top of the bounding
    rectangle of the given text, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-9">CSS pixels</a>; positive numbers
    indicating a distance going up from the given baseline.

    </p><p class="note">This number can vary greatly based on the input text, even if the first font
    specified covers all the characters in the input. For example, the <code id="drawing-text-to-the-bitmap:dom-textmetrics-actualboundingboxascent-2-2"><a href="#dom-textmetrics-actualboundingboxascent-2">actualBoundingBoxAscent</a></code> of a lowercase
    &quot;o&quot; from an alphabetic baseline would be less than that of an uppercase &quot;F&quot;. The value can
    easily be negative; for example, the distance from the top of the em box (<code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-5"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> value &quot;<code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-top"><a href="#dom-context-2d-textbaseline-top">top</a></code>&quot;) to the top of the bounding rectangle when
    the given text is just a single comma &quot;<code>,</code>&quot; would likely (unless the font is
    quite unusual) be negative.</p>

   </dd><dt><dfn id="dom-textmetrics-actualboundingboxdescent-2"><code>actualBoundingBoxDescent</code></dfn> attribute</dt><dd><p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-6"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the bottom of the bounding
   rectangle of the given text, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-10">CSS pixels</a>; positive numbers
   indicating a distance going down from the given baseline.</p></dd><dt><dfn id="dom-textmetrics-emheightascent-2"><code>emHeightAscent</code></dfn> attribute</dt><dd><p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-7"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the highest top of the em
   squares in the <a data-x-internal="line-box" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="drawing-text-to-the-bitmap:line-box">line box</a>, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-11">CSS pixels</a>; positive numbers
   indicating that the given baseline is below the top of that em square (so this value will usually
   be positive). Zero if the given baseline is the top of that em square; half the font size if the
   given baseline is the middle of that em square.</p></dd><dt><dfn id="dom-textmetrics-emheightdescent-2"><code>emHeightDescent</code></dfn> attribute</dt><dd><p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-8"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the lowest bottom of the em
   squares in the <a data-x-internal="line-box" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="drawing-text-to-the-bitmap:line-box-2">line box</a>, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-12">CSS pixels</a>; positive numbers
   indicating that the given baseline is below the bottom of that em square (so this value will
   usually be negative). (Zero if the given baseline is the bottom of that em square.)</p></dd><dt><dfn id="dom-textmetrics-hangingbaseline-2"><code>hangingBaseline</code></dfn> attribute</dt><dd><p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-9"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the hanging baseline of the
   <a data-x-internal="line-box" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="drawing-text-to-the-bitmap:line-box-3">line box</a>, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-13">CSS pixels</a>; positive numbers indicating that
   the given baseline is below the hanging baseline. (Zero if the given baseline is the hanging
   baseline.)</p></dd><dt><dfn id="dom-textmetrics-alphabeticbaseline-2"><code>alphabeticBaseline</code></dfn> attribute</dt><dd><p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-10"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the alphabetic baseline of
   the <a data-x-internal="line-box" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="drawing-text-to-the-bitmap:line-box-4">line box</a>, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-14">CSS pixels</a>; positive numbers indicating
   that the given baseline is below the alphabetic baseline. (Zero if the given baseline is the
   alphabetic baseline.)</p></dd><dt><dfn id="dom-textmetrics-ideographicbaseline-2"><code>ideographicBaseline</code></dfn> attribute</dt><dd><p>The distance from the horizontal line indicated by the <code id="drawing-text-to-the-bitmap:dom-context-2d-textbaseline-2-11"><a href="#dom-context-2d-textbaseline-2">textBaseline</a></code> attribute to the ideographic baseline of
   the <a data-x-internal="line-box" href="https://drafts.csswg.org/css2/visuren.html#line-box" id="drawing-text-to-the-bitmap:line-box-5">line box</a>, in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-text-to-the-bitmap:'px'-15">CSS pixels</a>; positive numbers indicating
   that the given baseline is below the ideographic baseline. (Zero if the given baseline is the
   ideographic baseline.)</p></dd></dl>

  <p class="note">Glyphs rendered using <code id="drawing-text-to-the-bitmap:dom-context-2d-filltext-2-2"><a href="#dom-context-2d-filltext-2">fillText()</a></code> and
  <code id="drawing-text-to-the-bitmap:dom-context-2d-stroketext-2-2"><a href="#dom-context-2d-stroketext-2">strokeText()</a></code> can spill out of the box given by the
  font size (the em square size) and the width returned by <code id="drawing-text-to-the-bitmap:dom-context-2d-measuretext-2"><a href="#dom-context-2d-measuretext-2">measureText()</a></code> (the text width). Authors are encouraged
  to use the bounding box values described above if this is an issue.</p>

  <p class="note">A future version of the 2D context API might 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.</p>


  <h6 id="drawing-paths-to-the-canvas"><span class="secno">4.12.5.1.12</span> Drawing paths to the canvas<a class="self-link" href="#drawing-paths-to-the-canvas"/></h6>

  <p>Objects that implement the <code id="drawing-paths-to-the-canvas:canvasdrawpath"><a href="#canvasdrawpath">CanvasDrawPath</a></code> interface have a <dfn id="current-default-path">current default
  path</dfn>. There is only one <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path">current default path</a>, it is not part of the
  <a href="#drawing-state" id="drawing-paths-to-the-canvas:drawing-state">drawing state</a>. The <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-2">current default path</a> is a <a href="#concept-path" id="drawing-paths-to-the-canvas:concept-path">path</a>, as described above.</p>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-beginpath"><a href="#dom-context-2d-beginpath-2">beginPath</a></code>()</dt><dd>

    <p>Resets the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-3">current default path</a>.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-fill"><a href="#dom-context-2d-fill-2">fill</a></code>( [ <var>fillRule</var> ] )</dt><dt><var>context</var> . <code id="drawing-paths-to-the-canvas:dom-context-2d-fill-2"><a href="#dom-context-2d-fill-2">fill</a></code>(<var>path</var> [, <var>fillRule</var> ] )</dt><dd>

    <p>Fills the subpaths of the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-4">current default path</a> or the given path with the
    current fill style, obeying the given fill rule.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-stroke"><a href="#dom-context-2d-stroke-2">stroke</a></code>()</dt><dt><var>context</var> . <code id="drawing-paths-to-the-canvas:dom-context-2d-stroke-2"><a href="#dom-context-2d-stroke-2">stroke</a></code>(<var>path</var>)</dt><dd>

    <p>Strokes the subpaths of the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-5">current default path</a> or the given path with the
    current stroke style.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-clip"><a href="#dom-context-2d-clip-2">clip</a></code>( [ <var>fillRule</var> ] )</dt><dt><var>context</var> . <code id="drawing-paths-to-the-canvas:dom-context-2d-clip-2"><a href="#dom-context-2d-clip-2">clip</a></code>(<var>path</var> [, <var>fillRule</var> ] )</dt><dd>

    <p>Further constrains the clipping region to the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-6">current default path</a> or the given
    path, using the given fill rule to determine what points are in the path.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-resetclip"><a href="#dom-context-2d-resetclip-2">resetClip</a></code>()</dt><dd>

    <p>Unconstrains the clipping region.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-ispointinpath"><a href="#dom-context-2d-ispointinpath-2">isPointInPath</a></code>(<var>x</var>, <var>y</var> [, <var>fillRule</var> ] )</dt><dt><var>context</var> . <code id="drawing-paths-to-the-canvas:dom-context-2d-ispointinpath-2"><a href="#dom-context-2d-ispointinpath-2">isPointInPath</a></code>(<var>path</var>, <var>x</var>, <var>y</var> [, <var>fillRule</var> ] )</dt><dd>

    <p>Returns true if the given point is in the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-7">current default path</a> or the given
    path, using the given fill rule to determine what points are in the path.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-ispointinstroke"><a href="#dom-context-2d-ispointinstroke-2">isPointInStroke</a></code>(<var>x</var>, <var>y</var>)</dt><dt><var>context</var> . <code id="drawing-paths-to-the-canvas:dom-context-2d-ispointinstroke-2"><a href="#dom-context-2d-ispointinstroke-2">isPointInStroke</a></code>(<var>path</var>, <var>x</var>, <var>y</var>)</dt><dd>

    <p>Returns true if the given point would be in the region covered by the stroke of the
    <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-8">current default path</a> or the given path, given the current stroke style.</p>

   </dd></dl><div class="status"><input onclick="toggleStatus(this)" type="button" value="⋰"/><p class="bugs"><strong>Spec bugs:</strong> <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=28217" title="&lt;canvas&gt;: not clear if two polygon paths with a common edge should have no line visible">28217</a></p></div>

  
  <p>The <dfn id="dom-context-2d-beginpath-2"><code>beginPath()</code></dfn> method, when invoked,
  must empty the list of subpaths in the context's <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-9">current default path</a> so that the it
  once again has zero subpaths.</p>

  <p>Where the following method definitions use the term <i>intended path</i>, it means the
  <code id="drawing-paths-to-the-canvas:path2d"><a href="#path2d">Path2D</a></code> argument, if one was provided, or the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-10">current default path</a>
  otherwise.</p>

  <p>When the intended path is a <code id="drawing-paths-to-the-canvas:path2d-2"><a href="#path2d">Path2D</a></code> object, the coordinates and lines of its
  subpaths must be transformed according to the <a href="#transformations" id="drawing-paths-to-the-canvas:transformations">
  current transformation matrix</a> on the object implementing the
  <code id="drawing-paths-to-the-canvas:canvastransform"><a href="#canvastransform">CanvasTransform</a></code> interface when used by these methods (without affecting the
  <code id="drawing-paths-to-the-canvas:path2d-3"><a href="#path2d">Path2D</a></code> object itself). When the intended path is the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-11">current default
  path</a>, it is not affected by the transform. (This is because transformations already affect
  the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-12">current default path</a> when it is constructed, so applying it when it is painted as
  well would result in a double transformation.)</p>

  <p>The <dfn id="dom-context-2d-fill-2"><code>fill()</code></dfn> method, when invoked, must fill
  all the subpaths of the intended path, using <code id="drawing-paths-to-the-canvas:dom-context-2d-fillstyle-2"><a href="#dom-context-2d-fillstyle-2">fillStyle</a></code>, and using the <a href="#fill-rule" id="drawing-paths-to-the-canvas:fill-rule">fill rule</a> indicated
  by the <var>fillRule</var> argument. Open subpaths must be implicitly closed when being filled
  (without affecting the actual subpaths).</p>

  <p>The <dfn id="dom-context-2d-stroke-2"><code>stroke()</code></dfn> method, when invoked, must
  <a href="#trace-a-path" id="drawing-paths-to-the-canvas:trace-a-path">trace</a> the intended path, using this
  <code id="drawing-paths-to-the-canvas:canvaspathdrawingstyles"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> object for the line styles, and then fill the resulting path
  using the <code id="drawing-paths-to-the-canvas:dom-context-2d-strokestyle-2"><a href="#dom-context-2d-strokestyle-2">strokeStyle</a></code> attribute, using the <a href="#dom-context-2d-fillrule-nonzero" id="drawing-paths-to-the-canvas:dom-context-2d-fillrule-nonzero">non-zero winding rule</a>.</p>

  <p class="note">As a result of how the algorithm to <a href="#trace-a-path" id="drawing-paths-to-the-canvas:trace-a-path-2">trace a path</a> is defined,
  overlapping parts of the paths in one stroke operation are treated as if their union was what was
  painted.</p>

  <p class="note">The stroke <em>style</em> is affected by the transformation during painting, even
  if the intended path is the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-13">current default path</a>.</p>

  <p>Paths, when filled or stroked, must be painted without affecting the <a href="#current-default-path" id="drawing-paths-to-the-canvas:current-default-path-14">current default
  path</a> or any <code id="drawing-paths-to-the-canvas:path2d-4"><a href="#path2d">Path2D</a></code> objects, and must be subject to <a href="#shadows" id="drawing-paths-to-the-canvas:shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha-2" id="drawing-paths-to-the-canvas:dom-context-2d-globalalpha-2">global
  alpha</a>, the <a href="#clipping-region" id="drawing-paths-to-the-canvas:clipping-region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation-2" id="drawing-paths-to-the-canvas:dom-context-2d-globalcompositeoperation-2">global composition operators</a>. (The effect
  of transformations is described above and varies based on which path is being used.)</p>

  <hr/>

  <p>The <dfn id="dom-context-2d-clip-2"><code>clip()</code></dfn> method, when invoked, 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 intended path, using the <a href="#fill-rule" id="drawing-paths-to-the-canvas:fill-rule-2">fill rule</a> indicated by
  the <var>fillRule</var> argument. 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 largest infinite
  surface (i.e. by default, no clipping occurs).</p>

  
  <p>The <dfn id="dom-context-2d-resetclip-2"><code>resetClip()</code></dfn> method, when invoked,
  must create a new <a href="#clipping-region" id="drawing-paths-to-the-canvas:clipping-region-2">clipping region</a> that is the largest infinite surface. The new
  clipping region replaces the current clipping region.</p>

  <hr/>

  <p>The <dfn id="dom-context-2d-ispointinpath-2"><code>isPointInPath()</code></dfn> method, when
  invoked, must return true if the point given by the <var>x</var> and <var>y</var> coordinates
  passed to the method, when treated as coordinates in the canvas coordinate space unaffected by the
  current transformation, is inside the intended path as determined by the <a href="#fill-rule" id="drawing-paths-to-the-canvas:fill-rule-3">fill rule</a>
  indicated by the <var>fillRule</var> argument; and must return false otherwise. Open subpaths must
  be implicitly closed when computing the area inside the path, without affecting the actual
  subpaths. Points on the path itself must be considered to be inside the path. If either of the
  arguments are infinite or NaN, then the method must return false.</p>

  <hr/>

  <p>The <dfn id="dom-context-2d-ispointinstroke-2"><code>isPointInStroke()</code></dfn> method,
  when invoked, must return true if the point given by the <var>x</var> and <var>y</var> coordinates
  passed to the method, when treated as coordinates in the canvas coordinate space unaffected by the
  current transformation, is inside the path that results from <a href="#trace-a-path" id="drawing-paths-to-the-canvas:trace-a-path-3">tracing</a> the intended path, using the <a href="#dom-context-2d-fillrule-nonzero" id="drawing-paths-to-the-canvas:dom-context-2d-fillrule-nonzero-2">non-zero winding rule</a>, and using the
  <code id="drawing-paths-to-the-canvas:canvaspathdrawingstyles-2"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code> interface for the line styles; and must return false
  otherwise. Points on the resulting path must be considered to be inside the path. If either of the
  arguments are infinite or NaN, then the method must return false.</p>

  <hr/>

  
  <div class="example" id="drawCustomFocusRingExample">

   <p>This <code id="drawing-paths-to-the-canvas:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element has a couple of checkboxes. The path-related commands are
   highlighted:</p>

   <pre>&lt;canvas height=400 width=750&gt;
 &lt;label&gt;&lt;input type=checkbox id=showA&gt; Show As&lt;/label&gt;
 &lt;label&gt;&lt;input type=checkbox id=showB&gt; Show Bs&lt;/label&gt;
 &lt;!-- ... --&gt;
&lt;/canvas&gt;
&lt;script&gt;
 function drawCheckbox(context, element, x, y, paint) {
   context.save();
   context.font = '10px sans-serif';
   context.textAlign = 'left';
   context.textBaseline = 'middle';
   var metrics = context.measureText(element.labels[0].textContent);
   if (paint) {
<strong>     context.beginPath();
     context.strokeStyle = 'black';
     context.rect(x-5, y-5, 10, 10);
     context.stroke();
</strong>     if (element.checked) {
<strong>       context.fillStyle = 'black';
       context.fill();
</strong>     }
     context.fillText(element.labels[0].textContent, x+5, y);
   }
<strong>   context.beginPath();
   context.rect(x-7, y-7, 12 + metrics.width+2, 14);
</strong>
   context.drawFocusIfNeeded(element);
   context.restore();
 }
 function drawBase() { /* ... */ }
 function drawAs() { /* ... */ }
 function drawBs() { /* ... */ }
 function redraw() {
   var canvas = document.getElementsByTagName('canvas')[0];
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height);
   drawCheckbox(context, document.getElementById('showA'), 20, 40, true);
   drawCheckbox(context, document.getElementById('showB'), 20, 60, true);
   drawBase();
   if (document.getElementById('showA').checked)
     drawAs();
   if (document.getElementById('showB').checked)
     drawBs();
 }
 function processClick(event) {
   var canvas = document.getElementsByTagName('canvas')[0];
   var context = canvas.getContext('2d');
   var x = event.clientX;
   var y = event.clientY;
   var node = event.target;
   while (node) {
     x -= node.offsetLeft - node.scrollLeft;
     y -= node.offsetTop - node.scrollTop;
     node = node.offsetParent;
   }
   drawCheckbox(context, document.getElementById('showA'), 20, 40, false);
   if (<strong>context.isPointInPath(x, y)</strong>)
     document.getElementById('showA').checked = !(document.getElementById('showA').checked);
   drawCheckbox(context, document.getElementById('showB'), 20, 60, false);
   if (<strong>context.isPointInPath(x, y)</strong>)
     document.getElementById('showB').checked = !(document.getElementById('showB').checked);
   redraw();
 }
 document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
 document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
 redraw();
&lt;/script&gt;</pre>


  </div>

  <h6 id="drawing-focus-rings-and-scrolling-paths-into-view"><span class="secno">4.12.5.1.13</span> Drawing focus rings and scrolling paths into view<a class="self-link" href="#drawing-focus-rings-and-scrolling-paths-into-view"/></h6>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-drawfocusifneeded"><a href="#dom-context-2d-drawfocusifneeded-2">drawFocusIfNeeded</a></code>(<var>element</var>)</dt><dt><var>context</var> . <code id="drawing-focus-rings-and-scrolling-paths-into-view:dom-context-2d-drawfocusifneeded-2"><a href="#dom-context-2d-drawfocusifneeded-2">drawFocusIfNeeded</a></code>(<var>path</var>, <var>element</var>)</dt><dd>

    <p>If the given element is <a href="https://html.spec.whatwg.org/multipage/interaction.html#focused" id="drawing-focus-rings-and-scrolling-paths-into-view:focused">focused</a>, draws a focus ring around the <a href="#current-default-path" id="drawing-focus-rings-and-scrolling-paths-into-view:current-default-path">current
    default path</a> or the given path, following the platform conventions for focus rings.</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-scrollpathintoview"><a href="#dom-context-2d-scrollpathintoview-2">scrollPathIntoView</a></code>()</dt><dt><var>context</var> . <code id="drawing-focus-rings-and-scrolling-paths-into-view:dom-context-2d-scrollpathintoview-2"><a href="#dom-context-2d-scrollpathintoview-2">scrollPathIntoView</a></code>(<var>path</var>)</dt><dd>

    <p>Scrolls the <a href="#current-default-path" id="drawing-focus-rings-and-scrolling-paths-into-view:current-default-path-2">current default path</a> or the given path into view. This is especially
    useful on devices with small screens, where the whole canvas might not be visible at once.</p>

   </dd></dl>

  
  Objects that implement the <code id="drawing-focus-rings-and-scrolling-paths-into-view:canvasuserinterface"><a href="#canvasuserinterface">CanvasUserInterface</a></code> interface provide the following
  methods to control drawing focus rings and scrolling paths into view.

  <hr/>

  <p id="dom-context-2d-drawosfocusring">The <dfn id="dom-context-2d-drawfocusifneeded-2"><code>drawFocusIfNeeded(<var>element</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>If <var>element</var> is not <a href="https://html.spec.whatwg.org/multipage/interaction.html#focused" id="drawing-focus-rings-and-scrolling-paths-into-view:focused-2">focused</a> or is not a descendant of the element with
   whose context the method is associated, then abort these steps.</p></li><li>

    <p>Draw a focus ring of the appropriate style along the intended path, following platform
    conventions.</p>

    <p class="note">Some platforms only draw focus rings around elements that have been focused from
    the keyboard, and not those focused from the mouse. Other platforms simply don't draw focus
    rings around some elements at all unless relevant accessibility features are enabled. This API
    is intended to follow these conventions. User agents that implement distinctions based on the
    manner in which the element was focused are encouraged to classify focus driven by the <code id="drawing-focus-rings-and-scrolling-paths-into-view:dom-focus-2"><a href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus-2">focus()</a></code> method based on the kind of user interaction event from which
    the call was triggered (if any).</p>

    <p>The focus ring should not be subject to the <a href="#shadows" id="drawing-focus-rings-and-scrolling-paths-into-view:shadows">shadow effects</a>, the
    <a href="#dom-context-2d-globalalpha-2" id="drawing-focus-rings-and-scrolling-paths-into-view:dom-context-2d-globalalpha-2">global alpha</a>, the <a href="#dom-context-2d-globalcompositeoperation-2" id="drawing-focus-rings-and-scrolling-paths-into-view:dom-context-2d-globalcompositeoperation-2">global composition operators</a>, or any of
    the members in the <code id="drawing-focus-rings-and-scrolling-paths-into-view:canvasfillstrokestyles"><a href="#canvasfillstrokestyles">CanvasFillStrokeStyles</a></code>, <code id="drawing-focus-rings-and-scrolling-paths-into-view:canvaspathdrawingstyles"><a href="#canvaspathdrawingstyles">CanvasPathDrawingStyles</a></code>,
    <code id="drawing-focus-rings-and-scrolling-paths-into-view:canvastextdrawingstyles"><a href="#canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> interfaces, but <em>should</em> be subject to the
    <a href="#clipping-region" id="drawing-focus-rings-and-scrolling-paths-into-view:clipping-region">clipping region</a>. (The effect of transformations is described above and varies based
    on which path is being used.)</p>

   </li><li><p><a href="#inform">Inform the user</a> that the focus is at the location given by the
   intended path. User agents may wait until the next time the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="drawing-focus-rings-and-scrolling-paths-into-view:event-loop">event loop</a> reaches its
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="drawing-focus-rings-and-scrolling-paths-into-view:update-the-rendering">update the rendering</a> step to optionally inform the user.</p></li></ol>

  <p>User agents should not implicitly close open subpaths in the intended path when drawing the
  focus ring.</p>

  <p class="note">This might be a moot point, however. For example, if the focus ring is drawn as an
  axis-aligned bounding rectangle around the points in the intended path, then whether the subpaths
  are closed or not has no effect. This specification intentionally does not specify precisely how
  focus rings are to be drawn: user agents are expected to honor their platform's native
  conventions.</p>

  <hr/>

  <p>The <dfn id="dom-context-2d-scrollpathintoview-2"><code>scrollPathIntoView()</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>Let <var>the specified rectangle</var> be the rectangle of the bounding box of
   the intended path.</p></li><li><p>Let <var>notional child</var> be a hypothetical element that is a rendered child
   of the <code id="drawing-focus-rings-and-scrolling-paths-into-view:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element whose dimensions are those of <var>the specified
   rectangle</var>.</p></li><li><p><a data-x-internal="scroll-an-element-into-view" href="https://drafts.csswg.org/cssom-view/#scroll-an-element-into-view" id="drawing-focus-rings-and-scrolling-paths-into-view:scroll-an-element-into-view">Scroll <var>notional child</var> into
   view</a> with the <var>align to top flag</var> set.</p>

   </li><li><p>Optionally, <a href="#inform">inform the user</a> that the caret or selection (or both)
   cover <var>the specified rectangle</var> of the canvas. The user agent may wait until the next
   time the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="drawing-focus-rings-and-scrolling-paths-into-view:event-loop-2">event loop</a> reaches its <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="drawing-focus-rings-and-scrolling-paths-into-view:update-the-rendering-2">update the rendering</a> step to
   optionally inform the user.</p></li></ol>

  <p id="inform">&quot;Inform the user&quot;, as used in this section, does not imply any persistent state
  change. It could mean, for instance, calling a system accessibility API to notify assistive
  technologies such as magnification tools so that the user's magnifier moves to the given area of
  the canvas. However, it does not associate the path with the element, or provide a region for
  tactile feedback, etc.</p>

  
  <h6 id="drawing-images"><span class="secno">4.12.5.1.14</span> Drawing images<a class="self-link" href="#drawing-images"/></h6>

  <p>Objects that implement the <code id="drawing-images:canvasdrawimage"><a href="#canvasdrawimage">CanvasDrawImage</a></code> interface have the <dfn id="dom-context-2d-drawimage"><code>drawImage</code></dfn> method to draw images.</p>

  
  <p>This method can be invoked with three different sets of arguments:</p>

  <ul class="brief"><li><code>drawImage(<var>image</var>, <var>dx</var>, <var>dy</var>)</code>
   </li><li><code>drawImage(<var>image</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</code>
   </li><li><code>drawImage(<var>image</var>, <var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</code>
  </li></ul>

  
  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-drawimage-2"><a href="#dom-context-2d-drawimage">drawImage</a></code>(<var>image</var>, <var>dx</var>, <var>dy</var>)</dt><dt><var>context</var> . <code id="drawing-images:dom-context-2d-drawimage"><a href="#dom-context-2d-drawimage">drawImage</a></code>(<var>image</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>dh</var>)</dt><dt><var>context</var> . <code id="drawing-images:dom-context-2d-drawimage-2"><a href="#dom-context-2d-drawimage">drawImage</a></code>(<var>image</var>, <var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var>, <var>dx</var>, <var>dy</var>, <var>dw</var>, <var>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="https://html.spec.whatwg.org/images/drawImage.png" width="356"/></p>

    <p>If the image isn't yet fully decoded, then nothing is drawn. If the image is a canvas with no
    data, throws an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="drawing-images:invalidstateerror">&quot;<code>InvalidStateError</code>&quot;</a> <code id="drawing-images:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.</p>

   </dd></dl>

  
  <p>When the <code id="drawing-images:dom-context-2d-drawimage-3"><a href="#dom-context-2d-drawimage">drawImage()</a></code> method is invoked, the user
  agent must run these steps:</p>

  <ol><li><p>If any of the arguments are infinite or NaN, then abort these steps.</p></li><li><p><a href="#check-the-usability-of-the-image-argument" id="drawing-images:check-the-usability-of-the-image-argument">Check the usability of the <var>image</var> argument</a>. If this
   returns <i>aborted</i>, then an exception has been thrown and the method doesn't return anything;
   abort these steps. If it returns <i>bad</i>, then abort these steps without drawing anything.
   Otherwise it returns <i>good</i>; continue with these steps.</p></li><li>

    <p>Establish the source and destination rectangles as follows:</p>

    <p>If not specified, the <var>dw</var> and <var>dh</var> arguments must default to the values of
    <var>sw</var> and <var>sh</var>, interpreted such that one <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="drawing-images:'px'">CSS pixel</a>
    in the image is treated as one unit in the <a href="#output-bitmap" id="drawing-images:output-bitmap">output bitmap</a>'s coordinate space. If the
    <var>sx</var>, <var>sy</var>, <var>sw</var>, and <var>sh</var> arguments are omitted, then they
    must default to 0, 0, the image's <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-width" id="drawing-images:intrinsic-width">intrinsic width</a> in image pixels, and the image's
    <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-height" id="drawing-images:intrinsic-height">intrinsic height</a> in image pixels, respectively. If the image has no <a data-x-internal="intrinsic-dimensions" href="https://drafts.csswg.org/css2/conform.html#intrinsic" id="drawing-images:intrinsic-dimensions">intrinsic
    dimensions</a>, then the <i>concrete object size</i> must be used instead, as determined
    using the CSS &quot;<a href="https://drafts.csswg.org/css-images/#default-sizing">Concrete Object
    Size Resolution</a>&quot; algorithm, with the <i>specified size</i> having neither a definite width
    nor height, nor any additional constraints, the object's intrinsic properties being those of the
    <var>image</var> argument, and the <a data-x-internal="default-object-size" href="https://drafts.csswg.org/css-images/#default-object-size" id="drawing-images:default-object-size">default object size</a> being the size of the
    <a href="#output-bitmap" id="drawing-images:output-bitmap-2">output bitmap</a>. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSSIMAGES">[CSSIMAGES]</a></p>

    <p>The source rectangle is the rectangle whose corners are the four points (<var>sx</var>, <var>sy</var>), (<var>sx</var>+<var>sw</var>, <var>sy</var>), (<var>sx</var>+<var>sw</var>, <var>sy</var>+<var>sh</var>),
    (<var>sx</var>, <var>sy</var>+<var>sh</var>).</p>

    <p>The destination rectangle is the rectangle whose corners are the four points (<var>dx</var>, <var>dy</var>), (<var>dx</var>+<var>dw</var>, <var>dy</var>), (<var>dx</var>+<var>dw</var>, <var>dy</var>+<var>dh</var>),
    (<var>dx</var>, <var>dy</var>+<var>dh</var>).</p>

    <p>When the source rectangle is outside the source image, the source rectangle must be clipped
    to the source image and the destination rectangle must be clipped in the same proportion.</p>

    <p class="note">When the destination rectangle is outside the destination image (the
    <a href="#output-bitmap" id="drawing-images:output-bitmap-3">output bitmap</a>), the pixels that land outside the <a href="#output-bitmap" id="drawing-images:output-bitmap-4">output bitmap</a> are
    discarded, as if the destination was an infinite canvas whose rendering was clipped to the
    dimensions of the <a href="#output-bitmap" id="drawing-images:output-bitmap-5">output bitmap</a>.</p>

   </li><li><p>If one of the <var>sw</var> or <var>sh</var> arguments is zero, then abort
   these steps. Nothing is painted.</p></li><li>

    <p>Paint the region of the <var>image</var> argument specified by the source rectangle
    on the region of the rendering context's <a href="#output-bitmap" id="drawing-images:output-bitmap-6">output bitmap</a> specified by the
    destination rectangle, after applying the <a href="#transformations" id="drawing-images:transformations">current
    transformation matrix</a> to the destination rectangle.</p>

    <p>The image data must be processed in the original direction, even if the dimensions given are
    negative. </p>

    <p>When scaling up, if the <code id="drawing-images:dom-context-2d-imagesmoothingenabled-2"><a href="#dom-context-2d-imagesmoothingenabled-2">imageSmoothingEnabled</a></code> attribute is set to
    true, the user agent should attempt to apply a smoothing algorithm to the image data when it is
    scaled. User agents which support multiple filtering algorithms may use the value of the <code id="drawing-images:dom-context-2d-imagesmoothingquality-2"><a href="#dom-context-2d-imagesmoothingquality-2">imageSmoothingQuality</a></code> attribute to guide
    the choice of filtering algorithm when the <code id="drawing-images:dom-context-2d-imagesmoothingenabled-2-2"><a href="#dom-context-2d-imagesmoothingenabled-2">imageSmoothingEnabled</a></code> attribute is set to
    true. Otherwise, the image must be rendered using nearest-neighbor interpolation.</p>

    <p class="note">This specification does not define the precise algorithm to use when scaling an
    image down, or when scaling an image up when the <code id="drawing-images:dom-context-2d-imagesmoothingenabled-2-3"><a href="#dom-context-2d-imagesmoothingenabled-2">imageSmoothingEnabled</a></code> attribute is set to
    true.</p>

    <p class="note">When a <code id="drawing-images:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element is drawn onto itself, the <a href="#drawing-model" id="drawing-images:drawing-model">drawing
    model</a> requires the source to be copied before the image is drawn, so it is possible to
    copy parts of a <code id="drawing-images:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> element onto overlapping parts of itself.</p>

    <p>If the original image data is a bitmap image, then the value painted at a point in the
    destination rectangle is computed by filtering the original image data. The user agent may use
    any filtering algorithm (for example bilinear interpolation or nearest-neighbor). When the
    filtering algorithm requires a pixel value from outside the original image data, it must instead
    use the value from the nearest edge pixel. (That is, the filter uses 'clamp-to-edge' behavior.)
    When the filtering algorithm requires a pixel value from outside the source rectangle but inside
    the original image data, then the value from the original image data must be used.</p>
    
    
    <p class="note">Thus, scaling an image in parts or in whole will have the same effect. This does
    mean that when sprites coming from a single sprite sheet are to be scaled, adjacent images in
    the sprite sheet can interfere. This can be avoided by ensuring each sprite in the sheet is
    surrounded by a border of transparent black, or by copying sprites to be scaled into temporary
    <code id="drawing-images:the-canvas-element-3"><a href="#the-canvas-element">canvas</a></code> elements and drawing the scaled sprites from there.</p>

    <p>Images are painted without affecting the current path, and are subject to <a href="#shadows" id="drawing-images:shadows">shadow effects</a>, <a href="#dom-context-2d-globalalpha-2" id="drawing-images:dom-context-2d-globalalpha-2">global
    alpha</a>, the <a href="#clipping-region" id="drawing-images:clipping-region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation-2" id="drawing-images:dom-context-2d-globalcompositeoperation-2">global composition operators</a>.</p>

   </li><li><p>If <a href="#the-image-argument-is-not-origin-clean" id="drawing-images:the-image-argument-is-not-origin-clean">the <var>image argument</var> is not origin-clean</a>, then set the
   <code id="drawing-images:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>'s <a href="#concept-canvas-origin-clean" id="drawing-images:concept-canvas-origin-clean">origin-clean</a> flag to false.</p></li></ol>

  
  <h6 id="pixel-manipulation"><span class="secno">4.12.5.1.15</span> <dfn>Pixel manipulation</dfn><a class="self-link" href="#pixel-manipulation"/></h6>

  <dl class="domintro"><dt><var>imagedata</var> = new <code id="pixel-manipulation:dom-imagedata"><a href="#dom-imagedata">ImageData</a></code>(<var>sw</var>, <var>sh</var>)</dt><dt><var>imagedata</var> = <var>context</var> . <code id="dom-context-2d-createimagedata"><a href="#dom-context-2d-createimagedata-2">createImageData</a></code>(<var>sw</var>, <var>sh</var>)</dt><dd>

    <p>Returns an <code id="pixel-manipulation:imagedata"><a href="#imagedata">ImageData</a></code> object with the given dimensions. All the pixels in the
    returned object are transparent black.</p>

    <p>Throws an <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror">&quot;<code>IndexSizeError</code>&quot;</a> <code id="pixel-manipulation:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if either of
    the width or height arguments are zero.</p>

   </dd><dt><var>imagedata</var> = <var>context</var> . <code id="pixel-manipulation:dom-context-2d-createimagedata-2"><a href="#dom-context-2d-createimagedata-2">createImageData</a></code>(<var>imagedata</var>)</dt><dd>

    <p>Returns an <code id="pixel-manipulation:imagedata-2"><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>

   </dd><dt><var>imagedata</var> = new <code id="pixel-manipulation:dom-imagedata-2"><a href="#dom-imagedata">ImageData</a></code>(<var>data</var>, <var>sw</var> [, <var>sh</var> ] )</dt><dd>

    <p>Returns an <code id="pixel-manipulation:imagedata-3"><a href="#imagedata">ImageData</a></code> object using the data provided in the <code id="pixel-manipulation:idl-uint8clampedarray"><a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray">Uint8ClampedArray</a></code> argument, interpreted using the given
    dimensions.</p>

    <p>As each pixel in the data is represented by four numbers, the length of the data needs to be
    a multiple of four times the given width. If the height is provided as well, then the length
    needs to be exactly the width times the height times 4.</p>

    <p>Throws an <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror-2">&quot;<code>IndexSizeError</code>&quot;</a> <code id="pixel-manipulation:domexception-2"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if the given
    data and dimensions can't be interpreted consistently, or if either dimension is zero.</p>

   </dd><dt><var>imagedata</var> = <var>context</var> . <code id="dom-context-2d-getimagedata"><a href="#dom-context-2d-getimagedata-2">getImageData</a></code>(<var>sx</var>, <var>sy</var>, <var>sw</var>, <var>sh</var>)</dt><dd>

    <p>Returns an <code id="pixel-manipulation:imagedata-4"><a href="#imagedata">ImageData</a></code> object containing the image data for the given rectangle of
    the bitmap.</p>

    <p>Throws an <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror-3">&quot;<code>IndexSizeError</code>&quot;</a> <code id="pixel-manipulation:domexception-3"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if the either
    of the width or height arguments are zero.</p>

   </dd><dt><var>imagedata</var> . <code id="dom-imagedata-width"><a href="#dom-imagedata-width-2">width</a></code></dt><dt><var>imagedata</var> . <code id="dom-imagedata-height"><a href="#dom-imagedata-height-2">height</a></code></dt><dd>

    <p>Returns the actual dimensions of the data in the <code id="pixel-manipulation:imagedata-5"><a href="#imagedata">ImageData</a></code> object, in
    pixels.</p>

   </dd><dt><var>imagedata</var> . <code id="dom-imagedata-data"><a href="#dom-imagedata-data-2">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>context</var> . <code id="dom-context-2d-putimagedata"><a href="#dom-context-2d-putimagedata-2">putImageData</a></code>(<var>imagedata</var>, <var>dx</var>, <var>dy</var> [, <var>dirtyX</var>, <var>dirtyY</var>, <var>dirtyWidth</var>, <var>dirtyHeight</var> ] )</dt><dd>

    <p>Paints the data from the given <code id="pixel-manipulation:imagedata-6"><a href="#imagedata">ImageData</a></code> object onto the bitmap. If a dirty
    rectangle is provided, only the pixels from that rectangle are painted.</p>

    <p>The <code id="pixel-manipulation:dom-context-2d-globalalpha-2"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code> and <code id="pixel-manipulation:dom-context-2d-globalcompositeoperation-2"><a href="#dom-context-2d-globalcompositeoperation-2">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>Throws an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="pixel-manipulation:invalidstateerror">&quot;<code>InvalidStateError</code>&quot;</a> <code id="pixel-manipulation:domexception-4"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> if the
    <var>imagedata</var> object's data's <a href="https://html.spec.whatwg.org/multipage/structured-data.html#detached" id="pixel-manipulation:detached">[[Detached]]</a> internal slot value is true.</p>

   </dd></dl>

  
  <p>Objects that implement the <code id="pixel-manipulation:canvasimagedata"><a href="#canvasimagedata">CanvasImageData</a></code> interface provide the following methods
  for reading and writing pixel data to the bitmap.</p>

  <p>The <dfn id="dom-imagedata"><code>ImageData()</code></dfn> constructors and the
  <dfn id="dom-context-2d-createimagedata-2"><code>createImageData()</code></dfn> methods are
  used to instantiate new <code id="pixel-manipulation:imagedata-7"><a href="#imagedata">ImageData</a></code> objects.</p>

  <p>When the <code id="pixel-manipulation:dom-imagedata-3"><a href="#dom-imagedata">ImageData()</a></code> constructor is invoked with two
  numeric arguments <var>sw</var> and <var>sh</var>, it must <a href="#create-an-imagedata-object" id="pixel-manipulation:create-an-imagedata-object">create an <code>ImageData</code>
  object</a> with parameter <var>pixelsPerRow</var> set to <var>sw</var>, and <var>rows</var> set
  to <var>sh</var>. The image data of the newly created <code id="pixel-manipulation:imagedata-8"><a href="#imagedata">ImageData</a></code> object must be
  initialized to transparent black. If both <var>sw</var> and <var>sh</var> are non-zero, then
  return the new <code id="pixel-manipulation:imagedata-9"><a href="#imagedata">ImageData</a></code> object. If one or both of <var>sw</var> and <var>sh</var>
  are zero, then the constructor must throw an <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror-4">&quot;<code>IndexSizeError</code>&quot;</a>
  <code id="pixel-manipulation:domexception-5"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> instead.</p>

  <p>When the <code id="pixel-manipulation:dom-imagedata-4"><a href="#dom-imagedata">ImageData()</a></code> constructor is invoked with its first
  argument being an <code id="pixel-manipulation:idl-uint8clampedarray-2"><a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray">Uint8ClampedArray</a></code> <var>source</var>
  and its second and optional third arguments being numeric arguments <var>sw</var> and
  <var>sh</var>, it must run these steps:</p>

  <ol><li><p>Let <var>length</var> be the number of bytes in <var>source</var>.</p></li><li><p>If <var>length</var> is not a non-zero integral multiple of four, then throw an
   <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="pixel-manipulation:invalidstateerror-2">&quot;<code>InvalidStateError</code>&quot;</a> <code id="pixel-manipulation:domexception-6"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these
   steps.</p></li><li><p>Let <var>length</var> be <var>length</var> divided by four.</p>

   </li><li>

    <p>If <var>length</var> is not an integral multiple of <var>sw</var>, then throw an
    <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror-5">&quot;<code>IndexSizeError</code>&quot;</a> <code id="pixel-manipulation:domexception-7"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these steps.</p>

    <p class="note">At this step, the length is guaranteed to be greater than zero (otherwise the
    second step above would have aborted the steps), so if <var>sw</var> is zero, this
    step will throw the exception and abort these steps.</p>

   </li><li><p>Let <var>height</var> be <var>length</var> divided by <var>sw</var>.</p></li><li><p>If the <var>sh</var> argument was not omitted, and its value is not equal to
   <var>height</var>, then throw an <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror-6">&quot;<code>IndexSizeError</code>&quot;</a>
   <code id="pixel-manipulation:domexception-8"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these steps.</p></li><li>

    <p><a href="#create-an-imagedata-object" id="pixel-manipulation:create-an-imagedata-object-2">Create an <code>ImageData</code> object</a>, with parameter <var>pixelsPerRow</var>
    set to <var>sw</var>, <var>rows</var> set to <var>sh</var>, and using <var>source</var>.
    Return the newly created <code id="pixel-manipulation:imagedata-10"><a href="#imagedata">ImageData</a></code> object.</p>

    <p class="note">The resulting object's data is not a <em>copy</em> of <var>source</var>, it's
    the actual <code id="pixel-manipulation:idl-uint8clampedarray-3"><a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray">Uint8ClampedArray</a></code> object passed as the
    first argument to the constructor.</p>

   </li></ol>

  <p>When the <code id="pixel-manipulation:dom-context-2d-createimagedata-2-2"><a href="#dom-context-2d-createimagedata-2">createImageData()</a></code> method is
  invoked with two numeric arguments <var>sw</var> and <var>sh</var>, it must <a href="#create-an-imagedata-object" id="pixel-manipulation:create-an-imagedata-object-3">create an
  <code>ImageData</code> object</a>, with parameter <var>pixelsPerRow</var> set to the
  absolute magnitude of <var>sw</var>, and parameter <var>rows</var> set to the absolute magnitude
  of <var>sh</var>. Initialize the image data of the new <code id="pixel-manipulation:imagedata-11"><a href="#imagedata">ImageData</a></code> object to
  transparent black. If both <var>sw</var> and <var>sh</var> are non-zero, then return
  the new <code id="pixel-manipulation:imagedata-12"><a href="#imagedata">ImageData</a></code> object. If one or both of <var>sw</var> and <var>sh</var> are
  zero, then throw an <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror-7">&quot;<code>IndexSizeError</code>&quot;</a> <code id="pixel-manipulation:domexception-9"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>
  instead.</p>

  <p>When the <code id="pixel-manipulation:dom-context-2d-createimagedata-2-3"><a href="#dom-context-2d-createimagedata-2">createImageData()</a></code> method is
  invoked with a single <var>imagedata</var> argument, it must <a href="#create-an-imagedata-object" id="pixel-manipulation:create-an-imagedata-object-4">create an
  <code>ImageData</code> object</a>, with parameter <var>pixelsPerRow</var> set to the value of
  the <code id="pixel-manipulation:dom-imagedata-width-2"><a href="#dom-imagedata-width-2">width</a></code> attribute of the <code id="pixel-manipulation:imagedata-13"><a href="#imagedata">ImageData</a></code>
  object passed as the argument, and the <var>rows</var> parameter set to the value of the
  <code id="pixel-manipulation:dom-imagedata-height-2"><a href="#dom-imagedata-height-2">height</a></code> attribute.
  Initialize the image data of the new <code id="pixel-manipulation:imagedata-14"><a href="#imagedata">ImageData</a></code> object to transparent black. Return
  the newly created <code id="pixel-manipulation:imagedata-15"><a href="#imagedata">ImageData</a></code> object.</p>

  <p>The <dfn id="dom-context-2d-getimagedata-2"><code>getImageData(<var>sx</var>,
  <var>sy</var>, <var>sw</var>, <var>sh</var>)</code></dfn> method, when invoked, must,
  if either the <var>sw</var> or <var>sh</var> arguments are zero, throw an
  <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="pixel-manipulation:indexsizeerror-8">&quot;<code>IndexSizeError</code>&quot;</a> <code id="pixel-manipulation:domexception-10"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>; otherwise,
  
  if the <code id="pixel-manipulation:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>'s <a href="#concept-canvas-origin-clean" id="pixel-manipulation:concept-canvas-origin-clean">origin-clean</a> flag is set to false, it must throw a
  <a data-x-internal="securityerror" href="https://heycam.github.io/webidl/#securityerror" id="pixel-manipulation:securityerror">&quot;<code>SecurityError</code>&quot;</a> <code id="pixel-manipulation:domexception-11"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>;
  
  otherwise, it must <a href="#create-an-imagedata-object" id="pixel-manipulation:create-an-imagedata-object-5">create an <code>ImageData</code> object</a>, with parameter
  <var>pixelsPerRow</var> set to <var>sw</var>, and parameter <var>rows</var> set to <var>sh</var>.
  Set the pixel values of the image data of the newly created <code id="pixel-manipulation:imagedata-16"><a href="#imagedata">ImageData</a></code> object to
  represent the <a href="#output-bitmap" id="pixel-manipulation:output-bitmap">output bitmap</a> for the area of that bitmap denoted by the rectangle
  whose corners are the four points (<var>sx</var>, <var>sy</var>), (<span><var>sx</var>+<var>sw</var></span>, <var>sy</var>), (<span><var>sx</var>+<var>sw</var></span>, <span><var>sy</var>+<var>sh</var></span>), (<var>sx</var>,
  <var>sy</var>+<var>sh</var>), in the bitmap's coordinate space units.
  Pixels outside the <a href="#output-bitmap" id="pixel-manipulation:output-bitmap-2">output bitmap</a> must be set to transparent black. Pixel values
  must not be premultiplied by alpha.</p>

  <p>When the user agent is required to <dfn id="create-an-imagedata-object">create an <code>ImageData</code> object</dfn>, given a
  positive integer number of rows <var>rows</var>, a positive integer number of pixels per row
  <var>pixelsPerRow</var>, and an optional <code id="pixel-manipulation:idl-uint8clampedarray-4"><a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray">Uint8ClampedArray</a></code> <var>source</var>, it must run these
  steps:</p>

  <ol><li><p>Let <var>imageData</var> be a new uninitialized <code id="pixel-manipulation:imagedata-17"><a href="#imagedata">ImageData</a></code> object.</p></li><li><p>If <var>source</var> is specified, then assign the <dfn id="dom-imagedata-data-2"><code>data</code></dfn> attribute of <var>imageData</var> to
   <var>source</var>.</p></li><li>
    <p>If <var>source</var> is not specified, then initialize the <code id="pixel-manipulation:dom-imagedata-data-2"><a href="#dom-imagedata-data-2">data</a></code> attribute of <var>imageData</var> to a new <code id="pixel-manipulation:idl-uint8clampedarray-5"><a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray">Uint8ClampedArray</a></code> object. The <code id="pixel-manipulation:idl-uint8clampedarray-6"><a data-x-internal="idl-uint8clampedarray" href="https://heycam.github.io/webidl/#idl-Uint8ClampedArray">Uint8ClampedArray</a></code> object must use a new <a href="#canvas-pixel-arraybuffer" id="pixel-manipulation:canvas-pixel-arraybuffer">Canvas
    Pixel <code>ArrayBuffer</code></a> for its storage, and must have a
    zero start offset and a length equal to the length of its storage, in bytes. The <a href="#canvas-pixel-arraybuffer" id="pixel-manipulation:canvas-pixel-arraybuffer-2">Canvas
    Pixel <code>ArrayBuffer</code></a> must have the correct size to
    store <var>rows</var> × <var>pixelsPerRow</var> pixels.</p>

    <p>If the <a href="#canvas-pixel-arraybuffer" id="pixel-manipulation:canvas-pixel-arraybuffer-3">Canvas Pixel <code>ArrayBuffer</code></a> cannot be
    allocated, then rethrow the <code id="pixel-manipulation:js-rangeerror"><a data-x-internal="js-rangeerror" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-rangeerror">RangeError</a></code> thrown by JavaScript,
    and abort these steps.</p>
   </li><li><p>Initialize the <dfn id="dom-imagedata-width-2"><code>width</code></dfn> attribute of
   <var>imageData</var> to <var>pixelsPerRow</var>.</p></li><li><p>Initialize the <dfn id="dom-imagedata-height-2"><code>height</code></dfn> attribute of
   <var>imageData</var> to <var>rows</var>.</p></li><li><p>Return <var>imageData</var>.</p></li></ol>

  <p><code id="pixel-manipulation:imagedata-18"><a href="#imagedata">ImageData</a></code> objects are <a href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable-objects" id="pixel-manipulation:serializable-objects">serializable objects</a>. Their <a href="https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps" id="pixel-manipulation:serialization-steps">serialization
  steps</a>, given <var>value</var> and <var>serialized</var>, are:</p>

  <ol><li><p>Set <var>serialized</var>.[[Data]] to the <a href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization" id="pixel-manipulation:sub-serialization">sub-serialization</a> of the value of
   <var>value</var>'s <code id="pixel-manipulation:dom-imagedata-data-2-2"><a href="#dom-imagedata-data-2">data</a></code> attribute.</p></li><li><p>Set <var>serialized</var>.[[Width]] to the value of <var>value</var>'s <code id="pixel-manipulation:dom-imagedata-width-2-2"><a href="#dom-imagedata-width-2">width</a></code> attribute.</p></li><li><p>Set <var>serialized</var>.[[Height]] to the value of <var>value</var>'s <code id="pixel-manipulation:dom-imagedata-height-2-2"><a href="#dom-imagedata-height-2">height</a></code> attribute.</p></li></ol>

  <p>Their <a href="https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps" id="pixel-manipulation:deserialization-steps">deserialization steps</a>, given <var>serialized</var> and <var>value</var>,
  are:</p>

  <ol><li><p>Initialize <var>value</var>'s <code id="pixel-manipulation:dom-imagedata-data-2-3"><a href="#dom-imagedata-data-2">data</a></code> attribute
   to the <a href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization" id="pixel-manipulation:sub-deserialization">sub-deserialization</a> of <var>serialized</var>.[[Data]].</p></li><li><p>Initialize <var>value</var>'s <code id="pixel-manipulation:dom-imagedata-width-2-3"><a href="#dom-imagedata-width-2">width</a></code> attribute
   to <var>serialized</var>.[[Width]].</p></li><li><p>Initialize <var>value</var>'s <code id="pixel-manipulation:dom-imagedata-height-2-3"><a href="#dom-imagedata-height-2">height</a></code> attribute
   to <var>serialized</var>.[[Height]].</p></li></ol>

  <p>A <dfn id="canvas-pixel-arraybuffer">Canvas Pixel <code>ArrayBuffer</code></dfn> is an <code id="pixel-manipulation:idl-arraybuffer"><a data-x-internal="idl-arraybuffer" href="https://heycam.github.io/webidl/#idl-ArrayBuffer">ArrayBuffer</a></code> whose data is 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 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 <dfn id="dom-context-2d-putimagedata-2"><code>putImageData()</code></dfn> method writes
  data from <code id="pixel-manipulation:imagedata-19"><a href="#imagedata">ImageData</a></code> structures back to the rendering context's <a href="#output-bitmap" id="pixel-manipulation:output-bitmap-3">output
  bitmap</a>. Its arguments are: <var>imagedata</var>, <var>dx</var>, <var>dy</var>,
  <var>dirtyX</var>, <var>dirtyY</var>, <var>dirtyWidth</var>, and <var>dirtyHeight</var>.</p>

  <p>When the last four arguments to this method are omitted, they must be assumed to have the
  values 0, 0, the <code id="pixel-manipulation:dom-imagedata-width-2-4"><a href="#dom-imagedata-width-2">width</a></code> member of the <var>imagedata</var> structure, and the <code id="pixel-manipulation:dom-imagedata-height-2-4"><a href="#dom-imagedata-height-2">height</a></code>
  member of the <var>imagedata</var> structure, respectively.</p>

  <p>The method, when invoked, must act as follows:</p>

  <ol><li>

    <p>If <var>imagedata</var>'s <code id="pixel-manipulation:dom-imagedata-data-2-4"><a href="#dom-imagedata-data-2">data</a></code> attribute value's
    <a href="https://html.spec.whatwg.org/multipage/structured-data.html#detached" id="pixel-manipulation:detached-2">[[Detached]]</a> internal slot value is true, then throw an
    <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="pixel-manipulation:invalidstateerror-3">&quot;<code>InvalidStateError</code>&quot;</a> <code id="pixel-manipulation:domexception-12"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these
    steps.</p>

   </li><li>

    <p>If <var>dirtyWidth</var> is negative, then let <var>dirtyX</var> be <span><var>dirtyX</var>+<var>dirtyWidth</var></span>, and let <var>dirtyWidth</var> be equal
    to the absolute magnitude of <var>dirtyWidth</var>.</p>

    <p>If <var>dirtyHeight</var> is negative, then let <var>dirtyY</var> be <span><var>dirtyY</var>+<var>dirtyHeight</var></span>, and let <var>dirtyHeight</var> be
    equal to the absolute magnitude of <var>dirtyHeight</var>.</p>

   </li><li>

    <p>If <var>dirtyX</var> is negative, then let <var>dirtyWidth</var> be <span><var>dirtyWidth</var>+<var>dirtyX</var></span>, and let <var>dirtyX</var> be zero.</p>

    <p>If <var>dirtyY</var> is negative, then let <var>dirtyHeight</var> be <span><var>dirtyHeight</var>+<var>dirtyY</var></span>, and let <var>dirtyY</var> be zero.</p>

   </li><li>

    <p>If <var>dirtyX</var>+<var>dirtyWidth</var> is greater than the <code id="pixel-manipulation:dom-imagedata-width-2-5"><a href="#dom-imagedata-width-2">width</a></code> attribute of the <var>imagedata</var> argument, then
    let <var>dirtyWidth</var> be the value of that <code id="pixel-manipulation:dom-imagedata-width-2-6"><a href="#dom-imagedata-width-2">width</a></code>
    attribute, minus the value of <var>dirtyX</var>.</p>

    <p>If <var>dirtyY</var>+<var>dirtyHeight</var> is greater than the <code id="pixel-manipulation:dom-imagedata-height-2-5"><a href="#dom-imagedata-height-2">height</a></code> attribute of the <var>imagedata</var> argument, then
    let <var>dirtyHeight</var> be the value of that <code id="pixel-manipulation:dom-imagedata-height-2-6"><a href="#dom-imagedata-height-2">height</a></code> attribute, minus the value of <var>dirtyY</var>.</p>

   </li><li>

    <p>If, after those changes, either <var>dirtyWidth</var> or <var>dirtyHeight</var> are negative
    or zero, then abort these steps without affecting any bitmaps.</p>

   </li><li><p>For all integer values of <var>x</var> and <var>y</var> where <span><var>dirtyX</var> ≤ <var>x</var> &lt; <span><var>dirtyX</var>+<var>dirtyWidth</var></span></span> and <span><var>dirtyY</var> ≤ <var>y</var> &lt; <span><var>dirtyY</var>+<var>dirtyHeight</var></span></span>, copy the
   four channels of the pixel with coordinate (<var>x</var>, <var>y</var>) in
   the <var>imagedata</var> data structure's <a href="#canvas-pixel-arraybuffer" id="pixel-manipulation:canvas-pixel-arraybuffer-4">Canvas Pixel
   <code>ArrayBuffer</code></a> to the pixel with coordinate (<span><var>dx</var>+<var>x</var></span>, <var>dy</var>+<var>y</var>)
   in the rendering context's <a href="#output-bitmap" id="pixel-manipulation:output-bitmap-4">output bitmap</a>.</p></li></ol>

  <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 id="pixel-manipulation:dom-context-2d-putimagedata-2"><a href="#dom-context-2d-putimagedata-2">putImageData()</a></code> might be returned to an equivalent
  <code id="pixel-manipulation:dom-context-2d-getimagedata-2"><a href="#dom-context-2d-getimagedata-2">getImageData()</a></code> as different values.</p>

  <p>The current path, <a href="#transformations" id="pixel-manipulation:transformations">transformation matrix</a>,
  <a href="#shadows" id="pixel-manipulation:shadows">shadow attributes</a>, <a href="#dom-context-2d-globalalpha-2" id="pixel-manipulation:dom-context-2d-globalalpha-2-2">global
  alpha</a>, the <a href="#clipping-region" id="pixel-manipulation:clipping-region">clipping region</a>, and <a href="#dom-context-2d-globalcompositeoperation-2" id="pixel-manipulation:dom-context-2d-globalcompositeoperation-2-2">global composition operator</a> must not
  affect the methods described in this section.</p>

  
  <div class="example">

   <p>In the following example, the script generates an <code id="pixel-manipulation:imagedata-20"><a href="#imagedata">ImageData</a></code> object so that it can
   draw onto it.</p>

   <pre>// canvas is a reference to a &lt;canvas&gt; 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 id="pixel-manipulation:dom-context-2d-getimagedata-2-2"><a href="#dom-context-2d-getimagedata-2">getImageData()</a></code> and <code id="pixel-manipulation:dom-context-2d-putimagedata-2-2"><a href="#dom-context-2d-putimagedata-2">putImageData()</a></code> to implement an edge detection
   filter.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
  &lt;title&gt;Edge detection demo&lt;/title&gt;
  &lt;script&gt;
   var image = new Image();
   function init() {
     image.onload = demo;
     image.src = &quot;image.jpeg&quot;;
   }
   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
     // In this case input.width and input.height
     // match canvas.width and canvas.height
     // but we'll use the former to keep the code generic.
     var w = input.width, h = input.height;
     var inputData = input.data;
     var outputData = output.data;

     // edge detection
     for (var y = 1; y &lt; h-1; y += 1) {
       for (var x = 1; x &lt; w-1; x += 1) {
         for (var c = 0; c &lt; 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);
   }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload=&quot;init()&quot;&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div>


  <h6 id="compositing"><span class="secno">4.12.5.1.16</span> Compositing<a class="self-link" href="#compositing"/></h6>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-globalalpha"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code> [ = <var>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>context</var> . <code id="dom-context-2d-globalcompositeoperation"><a href="#dom-context-2d-globalcompositeoperation-2">globalCompositeOperation</a></code> [ = <var>value</var> ]</dt><dd>

    <p>Returns the current composition operation, from the values defined in the Compositing and
    Blending specification. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCOMPOSITE">[COMPOSITE]</a>.</p>

    <p>Can be set, to change the composition operation. Unknown values are ignored.</p>

   </dd></dl><div class="status"><input onclick="toggleStatus(this)" type="button" value="⋰"/><p class="bugs"><strong>Spec bugs:</strong> <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27313" title="It seems like this should be defined in terms of an IDL enum. If not, please clarify the relationshi [...]">27313</a></p></div>

  
  <p>All drawing operations on an object which implements the <code id="compositing:canvascompositing"><a href="#canvascompositing">CanvasCompositing</a></code>
  interface are affected by the global compositing attributes, <code id="compositing:dom-context-2d-globalalpha-2"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code> and <code id="compositing:dom-context-2d-globalcompositeoperation-2"><a href="#dom-context-2d-globalcompositeoperation-2">globalCompositeOperation</a></code>.</p>

  
  <p>The <dfn id="dom-context-2d-globalalpha-2"><code>globalAlpha</code></dfn> attribute gives an
  alpha value that is applied to shapes and images before they are composited onto the <a href="#output-bitmap" id="compositing:output-bitmap">output
  bitmap</a>. 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, then the attribute must retain its previous value. When
  the context is created, the <code id="compositing:dom-context-2d-globalalpha-2-2"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code> attribute
  must initially have the value 1.0.</p>

  <p>The <dfn id="dom-context-2d-globalcompositeoperation-2"><code>globalCompositeOperation</code></dfn> attribute
  sets the <dfn id="current-composition-operator">current composition operator</dfn>, which controls how shapes and images are drawn onto the
  <a href="#output-bitmap" id="compositing:output-bitmap-2">output bitmap</a>, once they have had <code id="compositing:dom-context-2d-globalalpha-2-3"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code> and the current transformation matrix
  applied. The possible values are those defined in the Compositing and Blending specification, and
  include the values <dfn id="gcop-source-over"><code>source-over</code></dfn>
  and <dfn id="gcop-copy"><code>copy</code></dfn>.
  <a href="https://html.spec.whatwg.org/multipage/references.html#refsCOMPOSITE">[COMPOSITE]</a></p>

  <p>These values are all case-sensitive — they must be used exactly as defined. User agents
  must not recognize values that are not a <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitive" id="compositing:case-sensitive">case-sensitive</a> match for one of the values
  given in the Compositing and Blending specification. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCOMPOSITE">[COMPOSITE]</a></p>

  <p>On setting, if the user agent does not recognize the specified value, it must be ignored,
  leaving the value of <code id="compositing:dom-context-2d-globalcompositeoperation-2-2"><a href="#dom-context-2d-globalcompositeoperation-2">globalCompositeOperation</a></code> unaffected.
  Otherwise, the attribute must be set to the given new value.</p>

  <p>When the context is created, the <code id="compositing:dom-context-2d-globalcompositeoperation-2-3"><a href="#dom-context-2d-globalcompositeoperation-2">globalCompositeOperation</a></code> attribute must
  initially have the value <code id="compositing:gcop-source-over"><a href="#gcop-source-over">source-over</a></code>.</p>

  
  <h6 id="image-smoothing"><span class="secno">4.12.5.1.17</span> Image smoothing<a class="self-link" href="#image-smoothing"/></h6>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-imagesmoothingenabled"><a href="#dom-context-2d-imagesmoothingenabled-2">imageSmoothingEnabled</a></code> [ = <var>value</var> ]</dt><dd>

    <p>Returns whether pattern fills and the <code id="image-smoothing:dom-context-2d-drawimage"><a href="#dom-context-2d-drawimage">drawImage()</a></code> method will attempt to smooth images if
    their pixels don't line up exactly with the display, when scaling images up.</p>

    <p>Can be set, to change whether images are smoothed (true) or not (false).</p>

   </dd><dt><var>context</var> . <code id="dom-context-2d-imagesmoothingquality"><a href="#dom-context-2d-imagesmoothingquality-2">imageSmoothingQuality</a></code> [ = <var>value</var> ]</dt><dd>

    <p>Returns the current image-smoothing-quality preference.</p>

    <p>Can be set, to change the preferred quality of image smoothing. The possible values are
    &quot;<code id="image-smoothing:dom-context-2d-imagesmoothingquality-low"><a href="#dom-context-2d-imagesmoothingquality-low">low</a></code>&quot;, &quot;<code id="image-smoothing:dom-context-2d-imagesmoothingquality-medium"><a href="#dom-context-2d-imagesmoothingquality-medium">medium</a></code>&quot; and &quot;<code id="image-smoothing:dom-context-2d-imagesmoothingquality-high"><a href="#dom-context-2d-imagesmoothingquality-high">high</a></code>&quot;. Unknown values are ignored.</p>

   </dd></dl>

  
  <p>Objects that implement the <code id="image-smoothing:canvasimagesmoothing"><a href="#canvasimagesmoothing">CanvasImageSmoothing</a></code> interface have attributes that
  control how image smoothing is performed.</p>

  <p>The <dfn id="dom-context-2d-imagesmoothingenabled-2"><code>imageSmoothingEnabled</code></dfn>
  attribute, on getting, must return the last value it was set to. On setting, it must be set to the
  new value. When the object implementing the <code id="image-smoothing:canvasimagesmoothing-2"><a href="#canvasimagesmoothing">CanvasImageSmoothing</a></code> interface is
  created, the attribute must be set to true.</p>

  <p>The <dfn id="dom-context-2d-imagesmoothingquality-2"><code>imageSmoothingQuality</code></dfn>
  attribute, on getting, must return the last value it was set to. On setting, it must be set to the
  new value. When the object implementing the <code id="image-smoothing:canvasimagesmoothing-3"><a href="#canvasimagesmoothing">CanvasImageSmoothing</a></code> interface is
  created, the attribute must be set to &quot;<code id="image-smoothing:dom-context-2d-imagesmoothingquality-low-2"><a href="#dom-context-2d-imagesmoothingquality-low">low</a></code>&quot;.</p>

  
  <h6 id="shadows"><span class="secno">4.12.5.1.18</span> <dfn>Shadows</dfn><a class="self-link" href="#shadows"/></h6>

  <p>All drawing operations on an object which implements the <code id="shadows:canvasshadowstyles"><a href="#canvasshadowstyles">CanvasShadowStyles</a></code>
  interface are affected by the four global shadow attributes.</p>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-shadowcolor"><a href="#dom-context-2d-shadowcolor-2">shadowColor</a></code> [ = <var>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>context</var> . <code id="dom-context-2d-shadowoffsetx"><a href="#dom-context-2d-shadowoffsetx-2">shadowOffsetX</a></code> [ = <var>value</var> ]</dt><dt><var>context</var> . <code id="dom-context-2d-shadowoffsety"><a href="#dom-context-2d-shadowoffsety-2">shadowOffsetY</a></code> [ = <var>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>context</var> . <code id="dom-context-2d-shadowblur"><a href="#dom-context-2d-shadowblur-2">shadowBlur</a></code> [ = <var>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>

  
  <p>The <dfn id="dom-context-2d-shadowcolor-2"><code>shadowColor</code></dfn> attribute sets the
  color of the shadow.</p>

  <p>When the context is created, the <code id="shadows:dom-context-2d-shadowcolor-2"><a href="#dom-context-2d-shadowcolor-2">shadowColor</a></code>
  attribute initially must be fully-transparent black.</p>

  <p>On getting, the <a href="#serialisation-of-a-color" id="shadows:serialisation-of-a-color">serialization of the color</a>
  must be returned.</p>

  <p>On setting, the new value must be <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#parsed-as-a-css-color-value" id="shadows:parsed-as-a-css-color-value">parsed as a CSS &lt;color&gt; value</a> and the
  color assigned. If the value cannot be <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#parsed-as-a-css-color-value" id="shadows:parsed-as-a-css-color-value-2">parsed as a CSS &lt;color&gt; value</a> then it
  must be ignored, and the attribute must retain its previous value. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCSSCOLOR">[CSSCOLOR]</a></p>

  <p>The <dfn id="dom-context-2d-shadowoffsetx-2"><code>shadowOffsetX</code></dfn> and <dfn id="dom-context-2d-shadowoffsety-2"><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
  0.</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-2"><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 id="shadows:dom-context-2d-shadowblur-2"><a href="#dom-context-2d-shadowblur-2">shadowBlur</a></code>
  attribute must initially have the value 0.</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">Shadows are only drawn if</dfn> the opacity component of
  the alpha component of the color of <code id="shadows:dom-context-2d-shadowcolor-2-2"><a href="#dom-context-2d-shadowcolor-2">shadowColor</a></code> is
  non-zero and either the <code id="shadows:dom-context-2d-shadowblur-2-2"><a href="#dom-context-2d-shadowblur-2">shadowBlur</a></code> is non-zero, or
  the <code id="shadows:dom-context-2d-shadowoffsetx-2"><a href="#dom-context-2d-shadowoffsetx-2">shadowOffsetX</a></code> is non-zero, or the <code id="shadows:dom-context-2d-shadowoffsety-2"><a href="#dom-context-2d-shadowoffsety-2">shadowOffsetY</a></code> is non-zero.</p>

  <p><a href="#when-shadows-are-drawn" id="shadows:when-shadows-are-drawn">When shadows are drawn</a>, they must be rendered as follows:</p>

  <ol><li><p>Let <var>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>B</var> be an infinite transparent black bitmap, with a coordinate
   space and an origin identical to <var>A</var>.</p></li><li><p>Copy the alpha channel of <var>A</var> to <var>B</var>, offset by <code id="shadows:dom-context-2d-shadowoffsetx-2-2"><a href="#dom-context-2d-shadowoffsetx-2">shadowOffsetX</a></code> in the positive <var>x</var>
   direction, and <code id="shadows:dom-context-2d-shadowoffsety-2-2"><a href="#dom-context-2d-shadowoffsety-2">shadowOffsetY</a></code> in the positive
   <var>y</var> direction.</p></li><li>

    <p>If <code id="shadows:dom-context-2d-shadowblur-2-3"><a href="#dom-context-2d-shadowblur-2">shadowBlur</a></code> is greater than 0:</p>

    <ol><li> <p>Let <var>σ</var> be half the value of <code id="shadows:dom-context-2d-shadowblur-2-4"><a href="#dom-context-2d-shadowblur-2">shadowBlur</a></code>.</p></li><li> <p>Perform a 2D Gaussian Blur on <var>B</var>, using <var>σ</var>
     as the standard deviation.</p>  </li></ol>

    <p>User agents may limit values of <var>σ</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>B</var> to the
   red, green, and blue components (respectively) of the color of <code id="shadows:dom-context-2d-shadowcolor-2-3"><a href="#dom-context-2d-shadowcolor-2">shadowColor</a></code>.</p></li><li><p>Multiply the alpha component of every pixel in <var>B</var> by the alpha
   component of the color of <code id="shadows:dom-context-2d-shadowcolor-2-4"><a href="#dom-context-2d-shadowcolor-2">shadowColor</a></code>.</p></li><li><p>The shadow is in the bitmap <var>B</var>, and is rendered as part of the
   <a href="#drawing-model" id="shadows:drawing-model">drawing model</a> described below.</p></li></ol>

  
  <p>If the current composition operation is <code id="shadows:gcop-copy"><a href="#gcop-copy">copy</a></code>, then shadows
  effectively won't render (since the shape will overwrite the shadow).</p>

  <h6 id="filters"><span class="secno">4.12.5.1.19</span> Filters<a class="self-link" href="#filters"/></h6>

  <p>All drawing operations on an object which implements the <code id="filters:canvasfilters"><a href="#canvasfilters">CanvasFilters</a></code>
  interface are affected by the global <dfn id="dom-context-2d-filter"><code>filter</code></dfn>
  attribute.</p>

  <dl class="domintro"><dt><var>context</var> . <code id="dom-context-2d-filter-2"><a href="#dom-context-2d-filter">filter</a></code> [ = <var>value</var> ]</dt><dd>

    <p>Returns the current filter.</p>

    <p>Can be set, to change the filter. Values that cannot be parsed as a
    <a data-x-internal="filter-function-list" href="https://drafts.fxtf.org/filters/#typedef-filter-function-list" id="filters:filter-function-list">&lt;filter-function-list&gt;</a> value are ignored.</p>

   </dd></dl>

  
  <p>The <code id="filters:dom-context-2d-filter"><a href="#dom-context-2d-filter">filter</a></code> attribute, on getting, must
  return the last value it was successfully set to. The value must not be re-serialized. On setting,
  if the new value is 'none' (not the empty string, null, or undefined), filters must be disabled
  for the context. Otherwise, the value must be parsed as a
  <a data-x-internal="filter-function-list" href="https://drafts.fxtf.org/filters/#typedef-filter-function-list" id="filters:filter-function-list-2">&lt;filter-function-list&gt;</a> value. If the value cannot be parsed as a
  <a data-x-internal="filter-function-list" href="https://drafts.fxtf.org/filters/#typedef-filter-function-list" id="filters:filter-function-list-3">&lt;filter-function-list&gt;</a> value, where using property-independent style sheet
  syntax like 'inherit' or 'initial' is considered an invalid value, then it must be ignored, and
  the attribute must retain its previous value. When creating the object implementing the
  <code id="filters:canvasfilters-2"><a href="#canvasfilters">CanvasFilters</a></code> interface, the attribute must be set to 'none'.</p>

  <p>A <a data-x-internal="filter-function-list" href="https://drafts.fxtf.org/filters/#typedef-filter-function-list" id="filters:filter-function-list-4">&lt;filter-function-list&gt;</a> value consists of a sequence of one or more
  filter functions or references to SVG filters. The input to the filter is used as the input
  to the first item in the list. Subsequent items take the output of the previous item as
  their input. <a href="https://html.spec.whatwg.org/multipage/references.html#refsFILTERS">[FILTERS]</a></p>

  <p>Coordinates used in the value of the <code id="filters:dom-context-2d-filter-2"><a href="#dom-context-2d-filter">filter</a></code> attribute are interpreted such that one pixel is
  equivalent to one SVG user space unit and to one canvas coordinate space unit. Filter coordinates
  are not affected by the <a href="#transformations" id="filters:transformations">current transformation
  matrix</a>. The current transformation matrix affects only the input to the filter. Filters
  are applied in the <a href="#output-bitmap" id="filters:output-bitmap">output bitmap</a>'s coordinate space.</p>

  <p>When the value of the <code id="filters:dom-context-2d-filter-3"><a href="#dom-context-2d-filter">filter</a></code> attribute defines
  lengths using percentages or using <a data-x-internal="'em'" href="https://drafts.csswg.org/css-values/#em" id="filters:'em'">'em'</a> or <a data-x-internal="'ex'" href="https://drafts.csswg.org/css-values/#ex" id="filters:'ex'">'ex'</a> units, these must be
  interpreted relative to the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="filters:computed-value">computed value</a> of the <a data-x-internal="'font-size'" href="https://drafts.csswg.org/css-fonts/#font-size-prop" id="filters:'font-size'">'font-size'</a> property
  of the <a href="#font-style-source-object" id="filters:font-style-source-object">font style source object</a> at the time that the attribute is set, if it is an
  element. If the <a data-x-internal="computed-value" href="https://drafts.csswg.org/css-cascade/#computed-value" id="filters:computed-value-2">computed values</a> are undefined for a
  particular case (e.g. because the <a href="#font-style-source-object" id="filters:font-style-source-object-2">font style source object</a> is not an element or is
  not <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="filters:being-rendered">being rendered</a>), then the relative keywords must be interpreted relative to the
  default value of the <code id="filters:dom-context-2d-font-2"><a href="#dom-context-2d-font-2">font</a></code> attribute. The 'larger' and
  'smaller' keywords are not supported.</p>

  <p>If the value of the <code id="filters:dom-context-2d-filter-4"><a href="#dom-context-2d-filter">filter</a></code> attribute refers to an
  SVG filter in the same document, and this SVG filter changes, then the changed filter is used for
  the next draw operation.</p>

  <p>If the value of the <code id="filters:dom-context-2d-filter-5"><a href="#dom-context-2d-filter">filter</a></code> attribute refers to an
  SVG filter in an external resource document and that document is not loaded when a drawing
  operation is invoked, then the drawing operation must proceed with no filtering.</p>

  
  <h6 id="working-with-externally-defined-svg-filters"><span class="secno">4.12.5.1.20</span> Working with externally-defined SVG filters<a class="self-link" href="#working-with-externally-defined-svg-filters"/></h6>

  <p><i>This section is non-normative.</i></p>

  <p>Since drawing is performed using filter value 'none' until an externally-defined
  filter has finished loading, authors might wish to determine whether such a filter
  has finished loading before proceeding with a drawing operation. One way to accomplish
  this is to load the externally-defined filter elsewhere within the same page in some
  element that sends a <code>load</code> event (for example, an <a data-x-internal="svg-use" href="https://www.w3.org/TR/SVG11/struct.html#UseElement" id="working-with-externally-defined-svg-filters:svg-use">SVG
  <code>use</code></a> element), and wait for the <code>load</code> event to be
  dispatched.</p>

  
  <h6 id="drawing-model"><span class="secno">4.12.5.1.21</span> <dfn>Drawing model</dfn><a class="self-link" href="#drawing-model"/></h6>

  <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>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.</p></li><li><p>When the filter attribute is set to a value other than 'none' and all the
   externally-defined filters it references, if any, are in documents that are currently loaded,
   then use image <var>A</var> as the input to the <code id="drawing-model:dom-context-2d-filter"><a href="#dom-context-2d-filter">filter</a></code>, creating image <var>B</var>. Otherwise, let
   <var>B</var> be an alias for <var>A</var>.</p></li><li><p><a href="#when-shadows-are-drawn" id="drawing-model:when-shadows-are-drawn">When shadows are drawn</a>, render the shadow from image <var>B</var>,
   using the current shadow styles, creating image <var>C</var>.</p></li><li><p><a href="#when-shadows-are-drawn" id="drawing-model:when-shadows-are-drawn-2">When shadows are drawn</a>, multiply the alpha component of every pixel in <var>C</var> by <code id="drawing-model:dom-context-2d-globalalpha-2"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code>.</p></li><li><p><a href="#when-shadows-are-drawn" id="drawing-model:when-shadows-are-drawn-3">When shadows are drawn</a>, composite <var>C</var> within the
   <a href="#clipping-region" id="drawing-model:clipping-region">clipping region</a> over the current <a href="#output-bitmap" id="drawing-model:output-bitmap">output bitmap</a> using the <a href="#current-composition-operator" id="drawing-model:current-composition-operator">current
   composition operator</a>.</p></li><li><p>Multiply the alpha component of every pixel in <var>B</var> by <code id="drawing-model:dom-context-2d-globalalpha-2-2"><a href="#dom-context-2d-globalalpha-2">globalAlpha</a></code>.</p></li><li><p>Composite <var>B</var> within the <a href="#clipping-region" id="drawing-model:clipping-region-2">clipping region</a> over the current
   <a href="#output-bitmap" id="drawing-model:output-bitmap-2">output bitmap</a> using the <a href="#current-composition-operator" id="drawing-model:current-composition-operator-2">current composition operator</a>.</p></li></ol>

  <p>When compositing onto the <a href="#output-bitmap" id="drawing-model:output-bitmap-3">output bitmap</a>, pixels that would fall outside of the
  <a href="#output-bitmap" id="drawing-model:output-bitmap-4">output bitmap</a> must be discarded.</p>

  
  <h6 id="best-practices"><span class="secno">4.12.5.1.22</span> Best practices<a class="self-link" href="#best-practices"/></h6>

  <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, as in the <a href="#drawCustomFocusRingExample">example above</a>.</p>

  <p>When rendering focus rings, to ensure that focus rings have the appearance of native focus
  rings, authors should use the <code id="best-practices:dom-context-2d-drawfocusifneeded-2"><a href="#dom-context-2d-drawfocusifneeded-2">drawFocusIfNeeded()</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
  <a href="https://html.spec.whatwg.org/multipage/interaction.html#focused" id="best-practices:focused">focused</a>, so that it can simply be called whenever drawing the element, without
  checking whether the element is focused or not first.</p>

  <p>In addition to drawing focus rings, authors should use the <code id="best-practices:dom-context-2d-scrollpathintoview-2"><a href="#dom-context-2d-scrollpathintoview-2">scrollPathIntoView()</a></code> method when an element in
  the canvas is focused, to make sure it is visible on the screen (if applicable).</p>

  <p id="no-text-editing-in-canvas-please">Authors should avoid implementing text editing controls
  using the <code id="best-practices:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element. Doing so has a large number of disadvantages:</p>

  <ul><li>Mouse placement of the caret has to be reimplemented.</li><li>Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline
   text input).</li><li>Scrolling of the text control has to be implemented (horizontally for long lines, vertically
   for multiline input).</li><li>Native features such as copy-and-paste have to be reimplemented.</li><li>Native features such as spell-checking have to be reimplemented.</li><li>Native features such as drag-and-drop have to be reimplemented.</li><li>Native features such as page-wide text search have to be reimplemented.</li><li>Native features specific to the user, for example custom text services, have to be
   reimplemented. This is close to impossible since each user might have different services
   installed, and there is an unbounded set of possible such services.</li><li>Bidirectional text editing has to be reimplemented.</li><li>For multiline text editing, line wrapping has to be implemented for all relevant
   languages.</li><li>Text selection has to be reimplemented.</li><li>Dragging of bidirectional text selections has to be reimplemented.</li><li>Platform-native keyboard shortcuts have to be reimplemented.</li><li>Platform-native input method editors (IMEs) have to be reimplemented.</li><li>Undo and redo functionality has to be reimplemented.</li><li>Accessibility features such as magnification following the caret or selection have to be
   reimplemented.</li></ul>

  <p>This is a huge amount of work, and authors are most strongly encouraged to avoid doing any of
  it by instead using the <code id="best-practices:the-input-element"><a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element">input</a></code> element, the <code id="best-practices:the-textarea-element"><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element">textarea</a></code> element, or the
  <code id="best-practices:attr-contenteditable"><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable">contenteditable</a></code> attribute.</p>


  <h6 id="examples"><span class="secno">4.12.5.1.23</span> Examples<a class="self-link" href="#examples"/></h6>

  <p><i>This section is non-normative.</i></p>

  <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>&lt;canvas width=&quot;800&quot; height=&quot;450&quot;&gt;&lt;/canvas&gt;
&lt;script&gt;

 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);

&lt;/script&gt;</pre>

  </div>

  <div class="example">

   <p>The 2D rendering context for <code id="examples:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> is often used for sprite-based games. The
   following example demonstrates this:</p>

   <iframe height="216" src="https://html.spec.whatwg.org/demos/canvas/blue-robot/index-idle.html" width="396"/>

   <p>Here is the source for this example:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Blue Robot Demo&lt;/title&gt;
&lt;style&gt;
  html { overflow: hidden; min-height: 200px; min-width: 380px; }
  body { height: 200px; position: relative; margin: 8px; }
  .buttons { position: absolute; bottom: 0px; left: 0px; margin: 4px; }
&lt;/style&gt;
&lt;canvas width=&quot;380&quot; height=&quot;200&quot;&gt;&lt;/canvas&gt;
&lt;script&gt;
 var Landscape = function (context, width, height) {
   this.offset = 0;
   this.width = width;
   this.advance = function (dx) {
     this.offset += dx;
   };
   this.horizon = height * 0.7;
   // This creates the sky gradient (from a darker blue to white at the bottom)
   this.sky = context.createLinearGradient(0, 0, 0, this.horizon);
   this.sky.addColorStop(0.0, 'rgb(55,121,179)');
   this.sky.addColorStop(0.7, 'rgb(121,194,245)');
   this.sky.addColorStop(1.0, 'rgb(164,200,214)');
   // this creates the grass gradient (from a darker green to a lighter green)
   this.earth = context.createLinearGradient(0, this.horizon, 0, height);
   this.earth.addColorStop(0.0, 'rgb(81,140,20)');
   this.earth.addColorStop(1.0, 'rgb(123,177,57)');
   this.paintBackground = function (context, width, height) {
     // first, paint the sky and grass rectangles
     context.fillStyle = this.sky;
     context.fillRect(0, 0, width, this.horizon);
     context.fillStyle = this.earth;
     context.fillRect(0, this.horizon, width, height-this.horizon);
     // then, draw the cloudy banner
     // we make it cloudy by having the draw text off the top of the
     // canvas, and just having the blurred shadow shown on the canvas
     context.save();
     context.translate(width-((this.offset+(this.width*3.2)) % (this.width*4.0))+0, 0);
     context.shadowColor = 'white';
     context.shadowOffsetY = 30+this.horizon/3; // offset down on canvas
     context.shadowBlur = '5';
     context.fillStyle = 'white';
     context.textAlign = 'left';
     context.textBaseline = 'top';
     context.font = '20px sans-serif';
     context.fillText('WHATWG ROCKS', 10, -30); // text up above canvas
     context.restore();
     // then, draw the background tree
     context.save();
     context.translate(width-((this.offset+(this.width*0.2)) % (this.width*1.5))+30, 0);
     context.beginPath();
     context.fillStyle = 'rgb(143,89,2)';
     context.lineStyle = 'rgb(10,10,10)';
     context.lineWidth = 2;
     context.rect(0, this.horizon+5, 10, -50); // trunk
     context.fill();
     context.stroke();
     context.beginPath();
     context.fillStyle = 'rgb(78,154,6)';
     context.arc(5, this.horizon-60, 30, 0, Math.PI*2); // leaves
     context.fill();
     context.stroke();
     context.restore();
   };
   this.paintForeground = function (context, width, height) {
     // draw the box that goes in front
     context.save();
     context.translate(width-((this.offset+(this.width*0.7)) % (this.width*1.1))+0, 0);
     context.beginPath();
     context.rect(0, this.horizon - 5, 25, 25);
     context.fillStyle = 'rgb(220,154,94)';
     context.lineStyle = 'rgb(10,10,10)';
     context.lineWidth = 2;
     context.fill();
     context.stroke();
     context.restore();
   };
 };
&lt;/script&gt;
&lt;script&gt;
 var BlueRobot = function () {
   this.sprites = new Image();
   this.sprites.src = 'blue-robot.png'; // this sprite sheet has 8 cells
   this.targetMode = 'idle';
   this.walk = function () {
     this.targetMode = 'walk';
   };
   this.stop = function () {
     this.targetMode = 'idle';
   };
   this.frameIndex = {
     'idle': [0], // first cell is the idle frame
     'walk': [1,2,3,4,5,6], // the walking animation is cells 1-6
     'stop': [7], // last cell is the stopping animation
   };
   this.mode = 'idle';
   this.frame = 0; // index into frameIndex
   this.tick = function () {
     // this advances the frame and the robot
     // the return value is how many pixels the robot has moved
     this.frame += 1;
     if (this.frame &gt;= this.frameIndex[this.mode].length) {
       // we've reached the end of this animation cycle
       this.frame = 0;
       if (this.mode != this.targetMode) {
         // switch to next cycle
         if (this.mode == 'walk') {
           // we need to stop walking before we decide what to do next
           this.mode = 'stop';
         } else if (this.mode == 'stop') {
           if (this.targetMode == 'walk')
             this.mode = 'walk';
           else
             this.mode = 'idle';
         } else if (this.mode == 'idle') {
           if (this.targetMode == 'walk')
             this.mode = 'walk';
         }
       }
     }
     if (this.mode == 'walk')
       return 8;
     return 0;
   },
   this.paint = function (context, x, y) {
     if (!this.sprites.complete) return;
     // draw the right frame out of the sprite sheet onto the canvas
     // we assume each frame is as high as the sprite sheet
     // the x,y coordinates give the position of the bottom center of the sprite
     context.drawImage(this.sprites,
                       this.frameIndex[this.mode][this.frame] * this.sprites.height, 0, this.sprites.height, this.sprites.height,
                       x-this.sprites.height/2, y-this.sprites.height, this.sprites.height, this.sprites.height);
   };
 };
&lt;/script&gt;
&lt;script&gt;
 var canvas = document.getElementsByTagName('canvas')[0];
 var context = canvas.getContext('2d');
 var landscape = new Landscape(context, canvas.width, canvas.height);
 var blueRobot = new BlueRobot();
 // paint when the browser wants us to, using requestAnimationFrame()
 function paint() {
   context.clearRect(0, 0, canvas.width, canvas.height);
   landscape.paintBackground(context, canvas.width, canvas.height);
   blueRobot.paint(context, canvas.width/2, landscape.horizon*1.1);
   landscape.paintForeground(context, canvas.width, canvas.height);
   requestAnimationFrame(paint);
 }
 paint();
 // but tick every 150ms, so that we don't slow down when we don't paint
 setInterval(function () {
   var dx = blueRobot.tick();
   landscape.advance(dx);
 }, 100);
&lt;/script&gt;
&lt;p class=&quot;buttons&quot;&gt;
 &lt;input type=button value=&quot;Walk&quot; onclick=&quot;blueRobot.walk()&quot;&gt;
 &lt;input type=button value=&quot;Stop&quot; onclick=&quot;blueRobot.stop()&quot;&gt;
&lt;footer&gt;
 &lt;small&gt; Blue Robot Player Sprite by &lt;a href=&quot;https://johncolburn.deviantart.com/&quot;&gt;JohnColburn&lt;/a&gt;.
 Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.&lt;/small&gt;
 &lt;small&gt; This work is itself licensed under a &lt;a rel=&quot;license&quot; href=&quot;https://creativecommons.org/licenses/by-sa/3.0/&quot;&gt;Creative
 Commons Attribution-ShareAlike 3.0 Unported License&lt;/a&gt;.&lt;/small&gt;
&lt;/footer&gt;
</pre>

  </div>


  <h5 id="the-imagebitmap-rendering-context"><span class="secno">4.12.5.2</span> The <code id="the-imagebitmap-rendering-context:imagebitmap"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> rendering context<a class="self-link" href="#the-imagebitmap-rendering-context"/></h5>

  <h6 id="introduction-6"><span class="secno">4.12.5.2.1</span> Introduction<a class="self-link" href="#introduction-6"/></h6>

  <p><code id="introduction-6:imagebitmaprenderingcontext"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> is a performance-oriented interface that provides a
  low overhead method for displaying the contents of <code id="introduction-6:imagebitmap"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> objects. It uses
  transfer semantics to reduce overall memory consumption. It also streamlines performance by
  avoiding intermediate compositing, unlike the <code id="introduction-6:dom-context-2d-drawimage"><a href="#dom-context-2d-drawimage">drawImage()</a></code> method of
  <code id="introduction-6:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>.</p>

  <p>Using an <code id="introduction-6:the-img-element"><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code> element as an intermediate for getting an image resource into a
  canvas, for example, would result in two copies of the decoded image existing in memory at the
  same time: the <code id="introduction-6:the-img-element-2"><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code> element's copy, and the one in the canvas's backing store. This
  memory cost can be prohibitive when dealing with extremely large images. This can be avoided by
  using <code id="introduction-6:imagebitmaprenderingcontext-2"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code>.</p>

  <div class="example">
   <p>Using <code id="introduction-6:imagebitmaprenderingcontext-3"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code>, here is how to transcode an image to the JPEG
   format in a memory- and CPU-efficient way:</p>

   <pre>createImageBitmap(inputImageBlob).then(image =&gt; {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(image);

  canvas.toBlob(outputJPEGBlob =&gt; {
    // Do something with outputJPEGBlob.
  }, 'image/jpeg');
});</pre>
  </div>

  <h6 id="the-imagebitmaprenderingcontext-interface"><span class="secno">4.12.5.2.2</span> The <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> interface<a class="self-link" href="#the-imagebitmaprenderingcontext-interface"/></h6>

  <pre class="idl">[Exposed=Window]
interface <dfn id="imagebitmaprenderingcontext">ImageBitmapRenderingContext</dfn> {
  readonly attribute <a href="#htmlcanvaselement" id="the-imagebitmaprenderingcontext-interface:htmlcanvaselement">HTMLCanvasElement</a> <a href="#dom-imagebitmaprenderingcontext-canvas-2" id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-canvas-2">canvas</a>;
  void <a href="#dom-imagebitmaprenderingcontext-transferfromimagebitmap-2" id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap-2">transferFromImageBitmap</a>(ImageBitmap? bitmap);
};

dictionary <dfn id="imagebitmaprenderingcontextsettings">ImageBitmapRenderingContextSettings</dfn> {
  boolean <a href="#dom-imagebitmaprenderingcontextsettings-alpha" id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontextsettings-alpha">alpha</a> = true;
};</pre>

  <dl class="domintro"><dt><var>context</var> = <var>canvas</var> . <code id="the-imagebitmaprenderingcontext-interface:dom-canvas-getcontext-2"><a href="#dom-canvas-getcontext-2">getContext</a></code>('bitmaprenderer' [, { [ <code id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontextsettings-alpha-2"><a href="#dom-imagebitmaprenderingcontextsettings-alpha">alpha</a></code>: false ] } ] )</dt><dd>

    <p>Returns an <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-2"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object that is permanently bound to a
    particular <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element.</p>

    <p>If the <code id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontextsettings-alpha-3"><a href="#dom-imagebitmaprenderingcontextsettings-alpha">alpha</a></code> setting is
    provided and set to false, then the canvas is forced to always be opaque.</p>

   </dd><dt><var>context</var> . <code id="dom-imagebitmaprenderingcontext-canvas"><a href="#dom-imagebitmaprenderingcontext-canvas-2">canvas</a></code></dt><dd>

    <p>Returns the <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> element that the context is bound to.</p>

   </dd><dt><var>context</var> . <code id="dom-imagebitmaprenderingcontext-transferfromimagebitmap"><a href="#dom-imagebitmaprenderingcontext-transferfromimagebitmap-2">transferFromImageBitmap</a></code>(imageBitmap)</dt><dd>

    <p>Transfers the underlying <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data">bitmap data</a>
    from <var>imageBitmap</var> to <var>context</var>, and the bitmap becomes the contents of the
    <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-3"><a href="#the-canvas-element">canvas</a></code> element to which <var>context</var> is bound.</p>

   </dd><dt><var>context</var> . <code id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap-2-2"><a href="#dom-imagebitmaprenderingcontext-transferfromimagebitmap-2">transferFromImageBitmap</a></code>(
   null)</dt><dd>

    <p>Replaces contents of the <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-4"><a href="#the-canvas-element">canvas</a></code> element to which <var>context</var>
    is bound with a transparent black bitmap whose size corresponds to the <code id="the-imagebitmaprenderingcontext-interface:attr-canvas-width"><a href="#attr-canvas-width">width</a></code> and <code id="the-imagebitmaprenderingcontext-interface:attr-canvas-height"><a href="#attr-canvas-height">height</a></code>
    content attributes of the <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-5"><a href="#the-canvas-element">canvas</a></code> element.</p>

   </dd></dl>

  
  <p>The <dfn id="dom-imagebitmaprenderingcontext-canvas-2"><code>canvas</code></dfn> attribute
  must return the value it was initialized to when the object was created.</p>

  <p>An <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-3"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object has an <dfn id="concept-imagebitmaprenderingcontext-output-bitmap">output bitmap</dfn>, which is a
  reference to <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-2">bitmap data</a>.</p>

  <p>An <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-4"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object has a <dfn id="concept-imagebitmaprenderingcontext-bitmap-mode">bitmap mode</dfn>, which can be set to
  <dfn id="concept-imagebitmaprenderingcontext-valid">valid</dfn> or <dfn id="concept-imagebitmaprenderingcontext-blank">blank</dfn>. A value of <a href="#concept-imagebitmaprenderingcontext-valid" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-valid">valid</a> indicates that the context's
  <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap">output bitmap</a> refers to
  <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-3">bitmap data</a> that was acquired via <code id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap-2-3"><a href="#dom-imagebitmaprenderingcontext-transferfromimagebitmap-2">transferFromImageBitmap()</a></code>.
  A value <a href="#concept-imagebitmaprenderingcontext-blank" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-blank">blank</a> indicates that the
  context's <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-2">output
  bitmap</a> is a default transparent bitmap.</p>

  <p>An <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-5"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object also has an <dfn id="concept-imagebitmaprenderingcontext-alpha">alpha</dfn> flag, which can be set to true or
  false. When an <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-6"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object has its <a href="#concept-imagebitmaprenderingcontext-alpha" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha">alpha</a> flag set to false, the contents
  of the <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-6"><a href="#the-canvas-element">canvas</a></code> element to which the context is bound are obtained by
  compositing the context's <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-3">output bitmap</a> onto an opaque
  black bitmap of the same size using the source-over composite operation. If the <a href="#concept-imagebitmaprenderingcontext-alpha" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha-2">alpha</a> flag is set to true, then the
  <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-4">output bitmap</a> is used
  as the contents of the <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-7"><a href="#the-canvas-element">canvas</a></code> element to which the context is bound. <a href="https://html.spec.whatwg.org/multipage/references.html#refsCOMPOSITE">[COMPOSITE]</a></p>

  <p class="note">The step of compositing over an opaque black bitmap ought to be elided whenever
  equivalent results can be obtained more efficiently by other means.</p>

  <hr/>

  <p>When a user agent is required to <dfn id="set-an-imagebitmaprenderingcontext's-output-bitmap">set an <code>ImageBitmapRenderingContext</code>'s output
  bitmap</dfn>, with a <var>context</var> argument that is an
  <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-7"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object and an optional argument <var>bitmap</var> that
  refers to <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-4">bitmap data</a>, it must run these
  steps:</p>

  <ol><li><p>If a <var>bitmap</var> argument was not provided, then:</p>

    <ol><li><p>Set <var>context</var>'s <a href="#concept-imagebitmaprenderingcontext-bitmap-mode" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-bitmap-mode">bitmap mode</a> to <a href="#concept-imagebitmaprenderingcontext-blank" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-blank-2">blank</a>.</p></li><li><p>Let <var>canvas</var> be the <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-8"><a href="#the-canvas-element">canvas</a></code> element to which <var>context</var>
     is bound.</p></li><li><p>Set <var>context</var>'s <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-5">output bitmap</a> to be fully
     transparent black with an <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-width" id="the-imagebitmaprenderingcontext-interface:intrinsic-width">intrinsic width</a> equal to the numeric value of
     <var>canvas</var>'s <code id="the-imagebitmaprenderingcontext-interface:attr-canvas-width-2"><a href="#attr-canvas-width">width</a></code> attribute and an
     <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#intrinsic-height" id="the-imagebitmaprenderingcontext-interface:intrinsic-height">intrinsic height</a> equal to the numeric value of <var>canvas</var>'s <code id="the-imagebitmaprenderingcontext-interface:attr-canvas-height-2"><a href="#attr-canvas-height">height</a></code> attribute, those values being interpreted in <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="the-imagebitmaprenderingcontext-interface:'px'">CSS pixels</a>.</p></li><li><p>Set the <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-6">output bitmap</a>'s <a href="#concept-canvas-origin-clean" id="the-imagebitmaprenderingcontext-interface:concept-canvas-origin-clean">origin-clean</a> flag to true.</p></li></ol>

   </li><li><p>If a <var>bitmap</var> argument was provided, then:</p>

    <ol><li><p>Set <var>context</var>'s <a href="#concept-imagebitmaprenderingcontext-bitmap-mode" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-bitmap-mode-2">bitmap mode</a> to <a href="#concept-imagebitmaprenderingcontext-valid" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-valid-2">valid</a>.</p></li><li>
      <p>Set <var>context</var>'s <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-7">output bitmap</a> to refer
      to the same underlying bitmap data as <var>bitmap</var>, without making a copy.</p>

      <p class="note">The <a href="#concept-canvas-origin-clean" id="the-imagebitmaprenderingcontext-interface:concept-canvas-origin-clean-2">origin-clean</a> flag of
      <var>bitmap</var> is included in the bitmap data to be referenced by <var>context</var>'s
      <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-8">output bitmap</a>.</p>
     </li></ol>

   </li></ol>

  <hr/>

  <p>The <dfn id="imagebitmaprenderingcontext-creation-algorithm"><code>ImageBitmapRenderingContext</code> creation algorithm</dfn>, which is passed a
  <var>target</var> (a <code id="the-imagebitmaprenderingcontext-interface:the-canvas-element-9"><a href="#the-canvas-element">canvas</a></code> element) and optionally some arguments, consists of
  running the following steps:</p>

  <ol><li><p>If the algorithm was passed some arguments, then let <var>arg</var> be the first such
   argument. Otherwise, let <var>arg</var> be undefined.</p></li><li><p>Let <var>settings</var> be the result of <a href="#coerce-context-arguments-for-imagebitmaprenderingcontext" id="the-imagebitmaprenderingcontext-interface:coerce-context-arguments-for-imagebitmaprenderingcontext">coercing the <var>arg</var> context arguments for
   <code>ImageBitmapRenderingContext</code></a>.</p></li><li><p>Create a new <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-8"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object.</p></li><li><p>Initialize its <code id="the-imagebitmaprenderingcontext-interface:dom-context-2d-canvas-2"><a href="#dom-context-2d-canvas-2">canvas</a></code> attribute to point to
   <var>target</var>.</p></li><li><p>Let the new <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-9"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object's <a href="#concept-imagebitmaprenderingcontext-output-bitmap" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-output-bitmap-9">output bitmap</a> and
   <var>target</var>'s bitmap be a shared reference to the same bitmap.</p></li><li><p>Run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-imagebitmaprenderingcontext-interface:set-an-imagebitmaprenderingcontext's-output-bitmap">set an <code>ImageBitmapRenderingContext</code>'s output
   bitmap</a>, using the new <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-10"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object as the
   <var>context</var> argument, and with no <var>bitmap</var> argument.</p></li><li><p>Initialize <var>context</var>'s <a href="#concept-imagebitmaprenderingcontext-alpha" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha-3">alpha</a> flag to true.

   </p></li><li>

    <p>Process each of the members of <var>settings</var> as follows:</p>

    <dl><dt><dfn id="dom-imagebitmaprenderingcontextsettings-alpha"><code>alpha</code></dfn></dt><dd>If false, then set <var>context</var>'s <a href="#concept-imagebitmaprenderingcontext-alpha" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmaprenderingcontext-alpha-4">alpha</a> flag to false.</dd></dl>

   </li><li><p>Return the new <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-11"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object.</p></li></ol>

  <hr/>

  <p>When a user agent is required to <dfn id="coerce-context-arguments-for-imagebitmaprenderingcontext">coerce context arguments for
  <code>ImageBitmapRenderingContext</code></dfn>, it must run these steps:</p>

  <ol><li><p>Let <var>input</var> be the argument to coerce.</p></li><li><p>Let <var>jsval</var> be the result of <a data-x-internal="concept-idl-convert" href="https://heycam.github.io/webidl/#es-type-mapping" id="the-imagebitmaprenderingcontext-interface:concept-idl-convert">converting</a> <var>input</var> to a JavaScript value. (This can
   throw an exception.)</p></li><li><p>Let <var>dict</var> be the result of <a data-x-internal="concept-idl-convert" href="https://heycam.github.io/webidl/#es-type-mapping" id="the-imagebitmaprenderingcontext-interface:concept-idl-convert-2">converting</a>
   <var>jsval</var> to the dictionary type <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontextsettings"><a href="#imagebitmaprenderingcontextsettings">ImageBitmapRenderingContextSettings</a></code>. (This
   can throw an exception.)</p></li><li><p>Return <var>dict</var>.</p></li></ol>

  <hr/>

  <p>The <dfn id="dom-imagebitmaprenderingcontext-transferfromimagebitmap-2"><code>transferFromImageBitmap(<var>imageBitmap</var>)</code></dfn>
  method, when invoked, must run these steps:</p>

  <ol><li><p>Let <var>bitmapContext</var> be the <code id="the-imagebitmaprenderingcontext-interface:imagebitmaprenderingcontext-12"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code> object on
   which the <code id="the-imagebitmaprenderingcontext-interface:dom-imagebitmaprenderingcontext-transferfromimagebitmap-2-4"><a href="#dom-imagebitmaprenderingcontext-transferfromimagebitmap-2">transferFromImageBitmap()</a></code>
   method was called.</p></li><li><p>If <var>imageBitmap</var> is null, then run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-imagebitmaprenderingcontext-interface:set-an-imagebitmaprenderingcontext's-output-bitmap-2">set an
   ImageBitmapRenderingContext's output bitmap</a>, with <var>bitmapContext</var> as the
   <var>context</var> argument and no <var>bitmap</var> argument, then abort these steps.</p></li><li><p>If the value of <var>imageBitmap</var>'s <a href="https://html.spec.whatwg.org/multipage/structured-data.html#detached" id="the-imagebitmaprenderingcontext-interface:detached">[[Detached]]</a> internal slot is set to
   true, then throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-imagebitmaprenderingcontext-interface:invalidstateerror">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-imagebitmaprenderingcontext-interface:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and
   abort these steps.</p></li><li><p>Run the steps to <a href="#set-an-imagebitmaprenderingcontext's-output-bitmap" id="the-imagebitmaprenderingcontext-interface:set-an-imagebitmaprenderingcontext's-output-bitmap-3">set an <code>ImageBitmapRenderingContext</code>'s output
   bitmap</a>, with the <var>context</var> argument equal to <var>bitmapContext</var>, and the
   <var>bitmap</var> argument referring to <var>imageBitmap</var>'s underlying <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-5">bitmap data</a>.

   </p></li><li><p>Set the value of <var>imageBitmap</var>'s <a href="https://html.spec.whatwg.org/multipage/structured-data.html#detached" id="the-imagebitmaprenderingcontext-interface:detached-2">[[Detached]]</a> internal slot to
   true.</p></li><li><p>Unset <var>imageBitmap's</var> <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#concept-imagebitmap-bitmap-data" id="the-imagebitmaprenderingcontext-interface:concept-imagebitmap-bitmap-data-6">bitmap
   data</a>.</p></li></ol>

  
  <h5 id="the-offscreencanvas-interface"><span class="secno">4.12.5.3</span> The <code id="the-offscreencanvas-interface:offscreencanvas"><a href="#offscreencanvas">OffscreenCanvas</a></code> interface<a class="self-link" href="#the-offscreencanvas-interface"/></h5><div class="status"><input onclick="toggleStatus(this)" type="button" value="⋰"/><p class="support"><strong>Support:</strong> offscreencanvas<span class="and_chr no"><span>Chrome for Android</span> <span>None</span></span><span class="chrome no"><span>Chrome</span> <span>None</span></span><span class="and_uc no"><span>UC Browser for Android</span> <span>None</span></span><span class="ios_saf no"><span>iOS Safari</span> <span>None</span></span><span class="firefox no"><span>Firefox</span> <span>None</span></span><span class="ie no"><span>IE</span> <span>None</span></span><span class="samsung no"><span>Samsung Internet</span> <span>None</span></span><span class="op_mini no"><span>Opera Mini</span> <span>None</span></span><span class="safari no"><span>Safari</span> <span>None</span></span><span class="android no"><span>Android Browser</span> <span>None</span></span><span class="opera no"><span>Opera</span> <span>None</span></span><span class="edge no"><span>Edge</span> <span>None</span></span></p><p class="caniuse">Source: <a href="https://caniuse.com/#feat=offscreencanvas">caniuse.com</a></p></div>

  <pre class="idl">typedef (<a href="#offscreencanvasrenderingcontext2d" id="the-offscreencanvas-interface:offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a> or
        <a data-x-internal="webglrenderingcontext" href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext" id="the-offscreencanvas-interface:webglrenderingcontext">WebGLRenderingContext</a>) <dfn id="offscreenrenderingcontext">OffscreenRenderingContext</dfn>;

dictionary <dfn id="imageencodeoptions">ImageEncodeOptions</dfn> {
  DOMString <a href="#image-encode-options-type" id="the-offscreencanvas-interface:image-encode-options-type">type</a> = &quot;image/png&quot;;
  unrestricted double <a href="#image-encode-options-quality" id="the-offscreencanvas-interface:image-encode-options-quality">quality</a> = 1.0;
};

enum <dfn id="offscreenrenderingcontexttype">OffscreenRenderingContextType</dfn> { &quot;<a href="#offscreen-context-type-2d" id="the-offscreencanvas-interface:offscreen-context-type-2d">2d</a>&quot;, &quot;<a href="#offscreen-context-type-webgl" id="the-offscreencanvas-interface:offscreen-context-type-webgl">webgl</a>&quot; };

[<a href="#dom-offscreencanvas-2" id="the-offscreencanvas-interface:dom-offscreencanvas-2">Constructor</a>([EnforceRange] unsigned long long width, [EnforceRange] unsigned long long height), Exposed=(Window,Worker), <a href="https://html.spec.whatwg.org/multipage/structured-data.html#transferable" id="the-offscreencanvas-interface:transferable">Transferable</a>]
interface <dfn id="offscreencanvas">OffscreenCanvas</dfn> : <a data-x-internal="eventtarget" href="https://dom.spec.whatwg.org/#interface-eventtarget" id="the-offscreencanvas-interface:eventtarget">EventTarget</a> {
  attribute unsigned long long <a href="#dom-offscreencanvas-width-2" id="the-offscreencanvas-interface:dom-offscreencanvas-width-2">width</a>;
  attribute unsigned long long <a href="#dom-offscreencanvas-height-2" id="the-offscreencanvas-interface:dom-offscreencanvas-height-2">height</a>;

  <a href="#offscreenrenderingcontext" id="the-offscreencanvas-interface:offscreenrenderingcontext">OffscreenRenderingContext</a>? <a href="#dom-offscreencanvas-getcontext-2" id="the-offscreencanvas-interface:dom-offscreencanvas-getcontext-2">getContext</a>(<a href="#offscreenrenderingcontexttype" id="the-offscreencanvas-interface:offscreenrenderingcontexttype">OffscreenRenderingContextType</a> contextType, any... arguments);
  <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap" id="the-offscreencanvas-interface:imagebitmap">ImageBitmap</a> <a href="#dom-offscreencanvas-transfertoimagebitmap-2" id="the-offscreencanvas-interface:dom-offscreencanvas-transfertoimagebitmap-2">transferToImageBitmap</a>();
  Promise&lt;<a data-x-internal="blob" href="https://w3c.github.io/FileAPI/#blob" id="the-offscreencanvas-interface:blob">Blob</a>&gt; <a href="#dom-offscreencanvas-converttoblob-2" id="the-offscreencanvas-interface:dom-offscreencanvas-converttoblob-2">convertToBlob</a>(optional <a href="#imageencodeoptions" id="the-offscreencanvas-interface:imageencodeoptions">ImageEncodeOptions</a> options);
};
</pre>

  <p><code id="the-offscreencanvas-interface:offscreencanvas-2"><a href="#offscreencanvas">OffscreenCanvas</a></code> objects are used to create rendering contexts, much like an
  <code id="the-offscreencanvas-interface:htmlcanvaselement"><a href="#htmlcanvaselement">HTMLCanvasElement</a></code>, but with no connection to the DOM. This makes it possible to
  use canvas rendering contexts in <a href="https://html.spec.whatwg.org/multipage/workers.html#workers">workers</a>.</p>

  <p>An <code id="the-offscreencanvas-interface:offscreencanvas-3"><a href="#offscreencanvas">OffscreenCanvas</a></code> object may hold a weak reference to a <dfn id="offscreencanvas-placeholder">placeholder <code>canvas</code> element</dfn>, which is
  typically in the DOM, whose embedded content is provided by the <code id="the-offscreencanvas-interface:offscreencanvas-4"><a href="#offscreencanvas">OffscreenCanvas</a></code>
  object. The bitmap of the <code id="the-offscreencanvas-interface:offscreencanvas-5"><a href="#offscreencanvas">OffscreenCanvas</a></code> object is pushed to the <a href="#offscreencanvas-placeholder" id="the-offscreencanvas-interface:offscreencanvas-placeholder">placeholder <code>canvas</code> element</a> by
  calling the <dfn id="offscreencontext-commit"><code>commit()</code></dfn> method of the
  <code id="the-offscreencanvas-interface:offscreencanvas-6"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's rendering context. All rendering context types that
  can be created by an <code id="the-offscreencanvas-interface:offscreencanvas-7"><a href="#offscreencanvas">OffscreenCanvas</a></code> object must implement a <code id="the-offscreencanvas-interface:offscreencontext-commit"><a href="#offscreencontext-commit">commit()</a></code> method. The exact behavior of the commit
  method (e.g. whether it copies or transfers bitmaps) may vary, as defined by the rendering
  contexts' respective specifications. Only the <a href="#offscreencanvasrenderingcontext2d" id="the-offscreencanvas-interface:offscreencanvasrenderingcontext2d-2">2D context for offscreen canvases</a> is defined
  in this specification.</p>

  <dl class="domintro"><dt><var>offscreenCanvas</var> = new <code id="dom-offscreencanvas"><a href="#dom-offscreencanvas-2">OffscreenCanvas</a></code>(<var>width</var>,
   <var>height</var>)</dt><dt>

   </dt><dd>

    <p>Returns a new <code id="the-offscreencanvas-interface:offscreencanvas-8"><a href="#offscreencanvas">OffscreenCanvas</a></code> object that is not linked to a <a href="#offscreencanvas-placeholder" id="the-offscreencanvas-interface:offscreencanvas-placeholder-2">placeholder <code>canvas</code> element</a>, and
    whose bitmap's size is determined by the <var>width</var> and <var>height</var> arguments.</p>

   </dd><dt><var>context</var> = <var>offscreenCanvas</var> . <code id="dom-offscreencanvas-getcontext"><a href="#dom-offscreencanvas-getcontext-2">getContext</a></code>(<var>contextType</var> [, ... ] )</dt><dd>

    <p>Returns an object that exposes an API for drawing on the <code id="the-offscreencanvas-interface:offscreencanvas-9"><a href="#offscreencanvas">OffscreenCanvas</a></code>
    object. The first argument specifies the desired API, either &quot;<code id="the-offscreencanvas-interface:offscreen-context-type-2d-2"><a href="#offscreen-context-type-2d">2d</a></code>&quot;, or &quot;<code id="the-offscreencanvas-interface:offscreen-context-type-webgl-2"><a href="#offscreen-context-type-webgl">webgl</a></code>&quot;. Subsequent arguments are handled by that
    API.</p>

    <p>This specification defines the &quot;<code id="the-offscreencanvas-interface:canvas-context-2d"><a href="#canvas-context-2d">2d</a></code>&quot; context below,
    which is similar but distinct from the &quot;<code id="the-offscreencanvas-interface:offscreen-context-type-2d-3"><a href="#offscreen-context-type-2d">2d</a></code>&quot;
    context that is created from a <code id="the-offscreencanvas-interface:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element. There is also a specification that
    defines a &quot;<code id="the-offscreencanvas-interface:offscreen-context-type-webgl-3"><a href="#offscreen-context-type-webgl">webgl</a></code>&quot; context.
    <a href="https://html.spec.whatwg.org/multipage/references.html#refsWEBGL">[WEBGL]</a></p>

    <p>Returns null if the canvas has already been initialized with another context type (e.g.
    trying to get a &quot;<code id="the-offscreencanvas-interface:offscreen-context-type-2d-4"><a href="#offscreen-context-type-2d">2d</a></code>&quot; context after getting a
    &quot;<code id="the-offscreencanvas-interface:offscreen-context-type-webgl-4"><a href="#offscreen-context-type-webgl">webgl</a></code>&quot; context).</p>

   </dd></dl>

  
  <p>An <code id="the-offscreencanvas-interface:offscreencanvas-10"><a href="#offscreencanvas">OffscreenCanvas</a></code> object has an internal <dfn id="offscreencanvas-bitmap">bitmap</dfn> that is initialized when the object
  is created. The width and height of the <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap">bitmap</a> are
  equal to the values of the <code id="the-offscreencanvas-interface:dom-offscreencanvas-width-2-2"><a href="#dom-offscreencanvas-width-2">width</a></code> and <code id="the-offscreencanvas-interface:dom-offscreencanvas-height-2-2"><a href="#dom-offscreencanvas-height-2">height</a></code> attributes of the <code id="the-offscreencanvas-interface:offscreencanvas-11"><a href="#offscreencanvas">OffscreenCanvas</a></code>
  object. Initially, all the bitmap's pixels are transparent black.</p>

  <p>An <code id="the-offscreencanvas-interface:offscreencanvas-12"><a href="#offscreencanvas">OffscreenCanvas</a></code> object can have a rendering context bound to it. Initially,
  it does not have a bound rendering context. To keep track of whether it has a rendering context
  or not, and what kind of rendering context it is, an <code id="the-offscreencanvas-interface:offscreencanvas-13"><a href="#offscreencanvas">OffscreenCanvas</a></code> object also
  has a <dfn id="offscreencanvas-context-mode">context mode</dfn>, which is initially <dfn id="offscreencanvas-context-none">none</dfn> but can be changed to either <dfn id="offscreencanvas-context-2d">2d</dfn>, <dfn id="offscreencanvas-context-webgl">webgl</dfn> or <dfn id="offscreencanvas-context-detached">detached</dfn> by algorithms defined in this
  specification.</p>

  <p>The constructor <dfn id="dom-offscreencanvas-2"><code>OffscreenCanvas(<var>width</var>,
  <var>height</var>)</code></dfn>, when invoked, must create a new <code id="the-offscreencanvas-interface:offscreencanvas-14"><a href="#offscreencanvas">OffscreenCanvas</a></code>
  object with its <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-2">bitmap</a> initialized to a rectangular
  array of transparent black pixels of the dimensions specified by <var>width</var> and
  <var>height</var>; and its <code id="the-offscreencanvas-interface:dom-offscreencanvas-width-2-3"><a href="#dom-offscreencanvas-width-2">width</a></code> and <code id="the-offscreencanvas-interface:dom-offscreencanvas-height-2-3"><a href="#dom-offscreencanvas-height-2">height</a></code> attributes initialized to <var>width</var> and
  <var>height</var> respectively.</p>

  <hr/>

  <p><code id="the-offscreencanvas-interface:offscreencanvas-15"><a href="#offscreencanvas">OffscreenCanvas</a></code> objects are <a href="https://html.spec.whatwg.org/multipage/structured-data.html#transferable-objects" id="the-offscreencanvas-interface:transferable-objects">transferable</a>. Their <a href="https://html.spec.whatwg.org/multipage/structured-data.html#transfer-steps" id="the-offscreencanvas-interface:transfer-steps">transfer steps</a>, given <var>value</var> and
  <var>dataHolder</var>, are as follows:</p>

  <ol><li><p>If <var>value</var>'s <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode">context mode</a> is
   not equal to <a href="#offscreencanvas-context-none" id="the-offscreencanvas-interface:offscreencanvas-context-none">none</a>, then throw an
   <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-offscreencanvas-interface:invalidstateerror">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.</p></li><li><p>Set <var>value</var>'s <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode-2">context mode</a> to
   <a href="#offscreencanvas-context-detached" id="the-offscreencanvas-interface:offscreencanvas-context-detached">detached</a>.</p></li><li><p>Let <var>width</var> and <var>height</var> be the dimensions of <var>value</var>'s <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-3">bitmap</a>.</p></li><li><p>Unset <var>value</var>'s <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-4">bitmap</a>.</p></li><li><p>Set <var>dataHolder</var>.[[With]] to <var>width</var>, and
   <var>dataHolder</var>.[[Height]] to <var>height</var>.</p></li><li><p>Set <var>dataHolder</var>.[[PlaceholderCanvas]] to be a weak reference to
   <var>value</var>'s <a href="#offscreencanvas-placeholder" id="the-offscreencanvas-interface:offscreencanvas-placeholder-3">placeholder <code>canvas</code>
   element</a>, if <var>value</var> has one, or null if it does not.</p></li></ol>

  <p>Their <a href="https://html.spec.whatwg.org/multipage/structured-data.html#transfer-receiving-steps" id="the-offscreencanvas-interface:transfer-receiving-steps">transfer-receiving steps</a>, given <var>dataHolder</var> and <var>value</var>,
  are:</p>

  <ol><li><p>Initialize <var>value</var>'s <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-5">bitmap</a> to a
   rectangular array of transparent black pixels with width given by <var>dataHolder</var>.[[Width]]
   and height given by <var>dataHolder</var>.[[Height]].</p></li><li><p>If <var>dataHolder</var>.[[PlaceholderCanvas]] is not null, set <var>value</var>'s <a href="#offscreencanvas-placeholder" id="the-offscreencanvas-interface:offscreencanvas-placeholder-4">placeholder <code>canvas</code> element</a> to
   <var>dataHolder</var>.[[PlaceholderCanvas]] (while maintaining the weak reference
   semantics).</p></li></ol>

  <hr/>

  <p>The <dfn id="dom-offscreencanvas-getcontext-2"><code>getContext(<var>contextId</var>,
  <var>arguments...</var>)</code></dfn> method of an <code id="the-offscreencanvas-interface:offscreencanvas-16"><a href="#offscreencanvas">OffscreenCanvas</a></code> object, when
  invoked, must run the steps in the cell of the following table whose column header describes the
  <code id="the-offscreencanvas-interface:offscreencanvas-17"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode-3">context
  mode</a> and whose row header describes the method's first argument.</p>

  <table><thead><tr><td>
     </td><th><a href="#offscreencanvas-context-none" id="the-offscreencanvas-interface:offscreencanvas-context-none-2">none</a>
     </th><th><a href="#offscreencanvas-context-2d" id="the-offscreencanvas-interface:offscreencanvas-context-2d">2d</a>
     </th><th><a href="#offscreencanvas-context-webgl" id="the-offscreencanvas-interface:offscreencanvas-context-webgl">webgl</a>
     </th><th><a href="#offscreencanvas-context-detached" id="the-offscreencanvas-interface:offscreencanvas-context-detached-2">detached</a>
   </th></tr></thead><tbody><tr><th>&quot;<dfn id="offscreen-context-type-2d"><code>2d</code></dfn>&quot;
     </th><td>
      Follow the steps to <a href="#offscreen-2d-context-creation-algorithm" id="the-offscreencanvas-interface:offscreen-2d-context-creation-algorithm">create an
      offscreen 2D context</a> defined in the section below, passing it the
      <code id="the-offscreencanvas-interface:offscreencanvas-18"><a href="#offscreencanvas">OffscreenCanvas</a></code> object and the method's <var>arguments...</var>, to obtain
      an <code id="the-offscreencanvas-interface:offscreencanvasrenderingcontext2d-3"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code> object; if this does not throw an
      exception, then set the <code id="the-offscreencanvas-interface:offscreencanvas-19"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode-4">context mode</a> to <a href="#offscreencanvas-context-2d" id="the-offscreencanvas-interface:offscreencanvas-context-2d-2">2d</a>, and return the new
      <code id="the-offscreencanvas-interface:offscreencanvasrenderingcontext2d-4"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code> object.
     </td><td>
      Return the same object as was returned the last time the method was invoked with this same
      first argument.
     </td><td>
      Return null.
     </td><td>
      Throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-offscreencanvas-interface:invalidstateerror-2">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception-2"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.

    </td></tr><tr><th>&quot;<dfn id="offscreen-context-type-webgl"><code>webgl</code></dfn>&quot;
     </th><td>
      Follow the instructions given in the WebGL specification's <i>Context Creation</i> section to
      obtain either a <code id="the-offscreencanvas-interface:webglrenderingcontext-2"><a data-x-internal="webglrenderingcontext" href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext">WebGLRenderingContext</a></code> or null; if the returned value is null,
      then return null and abort these steps, otherwise, set the <code id="the-offscreencanvas-interface:offscreencanvas-20"><a href="#offscreencanvas">OffscreenCanvas</a></code>
      object's <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode-5">context mode</a> to <a href="#offscreencanvas-context-webgl" id="the-offscreencanvas-interface:offscreencanvas-context-webgl-2">webgl</a>, and return the
      <code id="the-offscreencanvas-interface:webglrenderingcontext-3"><a data-x-internal="webglrenderingcontext" href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#WebGLRenderingContext">WebGLRenderingContext</a></code> object. <a href="https://html.spec.whatwg.org/multipage/references.html#refsWEBGL">[WEBGL]</a>
     </td><td>
      Return null.
     </td><td>
      Return the same value as was returned the last time the method was invoked with this same
      first argument.
     </td><td>
      Throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-offscreencanvas-interface:invalidstateerror-3">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception-3"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.

  </td></tr></tbody></table>

  <hr/>

  
  <dl class="domintro"><dt><var>offscreenCanvas</var> . <code id="dom-offscreencanvas-width"><a href="#dom-offscreencanvas-width-2">width</a></code> [
   = <var>value</var> ]</dt><dt><var>offscreenCanvas</var> . <code id="dom-offscreencanvas-height"><a href="#dom-offscreencanvas-height-2">height</a></code> [
   = <var>value</var> ]</dt><dd>
    <p>These attributes return the dimensions of the <code id="the-offscreencanvas-interface:offscreencanvas-21"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-6">bitmap</a>.</p>

    <p>They can be set, to replace the <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-7">bitmap</a> with a
    new, transparent black bitmap of the specified dimensions (effectively resizing it).</p>
   </dd></dl>

  
  <p>If either the <dfn id="dom-offscreencanvas-width-2"><code>width</code></dfn> or <dfn id="dom-offscreencanvas-height-2"><code>height</code></dfn> attributes of an
  <code id="the-offscreencanvas-interface:offscreencanvas-22"><a href="#offscreencanvas">OffscreenCanvas</a></code> object are set (to a new value or to the same value as before) and
  the <code id="the-offscreencanvas-interface:offscreencanvas-23"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode-6">context
  mode</a> is <a href="#offscreencanvas-context-2d" id="the-offscreencanvas-interface:offscreencanvas-context-2d-3">2d</a>, then replace the
  <code id="the-offscreencanvas-interface:offscreencanvas-24"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-8">bitmap</a> with a
  new transparent black bitmap and <a href="#reset-the-rendering-context-to-its-default-state" id="the-offscreencanvas-interface:reset-the-rendering-context-to-its-default-state">reset the rendering context to its default state</a>.
  The new bitmap's dimensions are equal to the new values of the <code id="the-offscreencanvas-interface:dom-offscreencanvas-width-2-4"><a href="#dom-offscreencanvas-width-2">width</a></code> and <code id="the-offscreencanvas-interface:dom-offscreencanvas-height-2-4"><a href="#dom-offscreencanvas-height-2">height</a></code> attributes.</p>

  <p>The resizing behavior for &quot;<code id="the-offscreencanvas-interface:offscreen-context-type-webgl-5"><a href="#offscreen-context-type-webgl">webgl</a></code>&quot;
  contexts is defined in the WebGL specification. <a href="https://html.spec.whatwg.org/multipage/references.html#refsWEBGL">[WEBGL]</a></p>

  
  <p class="note">If an <code id="the-offscreencanvas-interface:offscreencanvas-25"><a href="#offscreencanvas">OffscreenCanvas</a></code> object whose dimensions were changed has
  a <a href="#offscreencanvas-placeholder" id="the-offscreencanvas-interface:offscreencanvas-placeholder-5">placeholder <code>canvas</code> element</a>, then
  the <a href="#offscreencanvas-placeholder" id="the-offscreencanvas-interface:offscreencanvas-placeholder-6">placeholder <code>canvas</code> element</a>'s
  <a data-x-internal="intrinsic-dimensions" href="https://drafts.csswg.org/css2/conform.html#intrinsic" id="the-offscreencanvas-interface:intrinsic-dimensions">intrinsic size</a> will only be updated via the <code id="the-offscreencanvas-interface:offscreencontext-commit-2"><a href="#offscreencontext-commit">commit()</a></code> method of the <code id="the-offscreencanvas-interface:offscreencanvas-26"><a href="#offscreencanvas">OffscreenCanvas</a></code>
  object's rendering context.</p>

  <dl class="domintro"><dt><var>promise</var> = <var>offscreenCanvas</var> . <code id="dom-offscreencanvas-converttoblob"><a href="#dom-offscreencanvas-converttoblob-2">convertToBlob</a></code>( [<var>options</var>] )</dt><dd>
    <p>Returns a promise that will fulfill with a new <code id="the-offscreencanvas-interface:blob-2"><a data-x-internal="blob" href="https://w3c.github.io/FileAPI/#blob">Blob</a></code> object representing a file
    containing the image in the <code id="the-offscreencanvas-interface:offscreencanvas-27"><a href="#offscreencanvas">OffscreenCanvas</a></code> object.</p>

    <p>The argument, if provided, is a dictionary that controls the encoding options of the image
    file to be created. The <code id="the-offscreencanvas-interface:image-encode-options-type-2"><a href="#image-encode-options-type">type</a></code>
    field specifies the file format and has a default value of &quot;<code id="the-offscreencanvas-interface:image/png"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/png">image/png</a></code>&quot;; that type
    is also used if the requested type isn't supported. If the image format supports variable
    quality (such as &quot;<code id="the-offscreencanvas-interface:image/jpeg"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/jpeg">image/jpeg</a></code>&quot;), then the <code id="the-offscreencanvas-interface:image-encode-options-quality-2"><a href="#image-encode-options-quality">quality</a></code> field is a number in the range 0.0
    to 1.0 inclusive indicating the desired quality level for the resulting image.</p>
   </dd><dt><var>canvas</var> . <code id="dom-offscreencanvas-transfertoimagebitmap"><a href="#dom-offscreencanvas-transfertoimagebitmap-2">transferToImageBitmap</a></code>()</dt><dd>
    <p>Returns a newly created <code id="the-offscreencanvas-interface:imagebitmap-2"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> object with the image in the
    <code id="the-offscreencanvas-interface:offscreencanvas-28"><a href="#offscreencanvas">OffscreenCanvas</a></code> object. The image in the <code id="the-offscreencanvas-interface:offscreencanvas-29"><a href="#offscreencanvas">OffscreenCanvas</a></code> object is
    replaced with a new blank image.</p>
   </dd></dl>

  
  <p>The <dfn id="dom-offscreencanvas-converttoblob-2"><code>convertToBlob(<var>options</var>)</code></dfn> method,
  when invoked, must run the following steps:</p>

  <ol><li><p>If the value of this <code id="the-offscreencanvas-interface:offscreencanvas-30"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="https://html.spec.whatwg.org/multipage/structured-data.html#detached" id="the-offscreencanvas-interface:detached">[[Detached]]</a>
   internal slot is set to true, then return a promise rejected with an
   <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-offscreencanvas-interface:invalidstateerror-4">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception-4"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these
   steps.</p></li><li><p>If this <code id="the-offscreencanvas-interface:offscreencanvas-31"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode-7">context mode</a> is <a href="#offscreencanvas-context-2d" id="the-offscreencanvas-interface:offscreencanvas-context-2d-4">2d</a> and the rendering context's <a href="#offscreencontext2d-bitmap" id="the-offscreencanvas-interface:offscreencontext2d-bitmap">bitmap</a>'s <a href="#offscreencontext2d-origin-clean" id="the-offscreencanvas-interface:offscreencontext2d-origin-clean">origin-clean</a> flag is set to false, then return a
   promise rejected with a <a data-x-internal="securityerror" href="https://heycam.github.io/webidl/#securityerror" id="the-offscreencanvas-interface:securityerror">&quot;<code>SecurityError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception-5"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and
   abort these steps.</p>

   </li><li><p>If this <code id="the-offscreencanvas-interface:offscreencanvas-32"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-9">bitmap</a> has no pixels (i.e. either its
   horizontal dimension or its vertical dimension is zero) then return a promise rejected with an
   <a data-x-internal="indexsizeerror" href="https://heycam.github.io/webidl/#indexsizeerror" id="the-offscreencanvas-interface:indexsizeerror">&quot;<code>IndexSizeError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception-6"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these
   steps.</p></li><li><p>Let <var>result</var> be a new promise object.</p></li><li><p>Return <var>result</var>, and <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="the-offscreencanvas-interface:queue-a-task">queue a task</a> to run the remaining steps
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="the-offscreencanvas-interface:in-parallel">in parallel</a>.</p></li><li><p>Let <var>blob</var> be a <code id="the-offscreencanvas-interface:blob-3"><a data-x-internal="blob" href="https://w3c.github.io/FileAPI/#blob">Blob</a></code> object, created in the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="the-offscreencanvas-interface:concept-relevant-realm">relevant Realm</a> of this <code id="the-offscreencanvas-interface:offscreencanvas-33"><a href="#offscreencanvas">OffscreenCanvas</a></code>
   object, representing <a href="#a-serialisation-of-the-bitmap-as-a-file" id="the-offscreencanvas-interface:a-serialisation-of-the-bitmap-as-a-file">a serialization of
   this <code>OffscreenCanvas</code> object's <span>bitmap</span> as
   a file</a>, passing the values of the <dfn id="image-encode-options-type"><code>type</code></dfn> and <dfn id="image-encode-options-quality"><code>quality</code></dfn> fields of <var>options</var>, if
   <var>options</var> was specified. <a href="https://html.spec.whatwg.org/multipage/references.html#refsFILEAPI">[FILEAPI]</a></p></li><li><p>If <var>blob</var> is null, then reject <var>result</var> with an
   <a data-x-internal="encodingerror" href="https://heycam.github.io/webidl/#encodingerror" id="the-offscreencanvas-interface:encodingerror">&quot;<code>EncodingError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception-7"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code>.</p></li><li><p>Otherwise, resolve <var>result</var> with <var>blob</var>.</p></li></ol>

  <p>The <dfn id="dom-offscreencanvas-transfertoimagebitmap-2"><code>transferToImageBitmap()</code></dfn> method,
  when invoked, must run the following steps:</p>
  <ol><li><p>If the value of this <code id="the-offscreencanvas-interface:offscreencanvas-34"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="https://html.spec.whatwg.org/multipage/structured-data.html#detached" id="the-offscreencanvas-interface:detached-2">[[Detached]]</a>
   internal slot is set to true, then throw an <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-offscreencanvas-interface:invalidstateerror-5">&quot;<code>InvalidStateError</code>&quot;</a>
   <code id="the-offscreencanvas-interface:domexception-8"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these steps.</p></li><li><p>If this <code id="the-offscreencanvas-interface:offscreencanvas-35"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-context-mode" id="the-offscreencanvas-interface:offscreencanvas-context-mode-8">context mode</a> is set to <a href="#offscreencanvas-context-none" id="the-offscreencanvas-interface:offscreencanvas-context-none-3">none</a>, then throw an
   <a data-x-internal="invalidstateerror" href="https://heycam.github.io/webidl/#invalidstateerror" id="the-offscreencanvas-interface:invalidstateerror-6">&quot;<code>InvalidStateError</code>&quot;</a> <code id="the-offscreencanvas-interface:domexception-9"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> and abort these
   steps.</p></li><li><p>Let <var>image</var> be a newly created <code id="the-offscreencanvas-interface:imagebitmap-3"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> object that references
   the same underlying bitmap data as this <code id="the-offscreencanvas-interface:offscreencanvas-36"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-10">bitmap</a>.</p></li><li><p>Set this <code id="the-offscreencanvas-interface:offscreencanvas-37"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-bitmap" id="the-offscreencanvas-interface:offscreencanvas-bitmap-11">bitmap</a> to reference a newly created bitmap of the
   same dimensions as the previous bitmap, and with its pixels initialized to transparent black,
   or opaque black if the rendering context's <a href="#offscreencontext2d-alpha" id="the-offscreencanvas-interface:offscreencontext2d-alpha">alpha</a> flag is set to false.</p></li><li><p>Return <var>image</var>.</p></li></ol>
  

  <h6 id="the-offscreen-2d-rendering-context"><span class="secno">4.12.5.3.1</span> The offscreen 2D rendering context<a class="self-link" href="#the-offscreen-2d-rendering-context"/></h6>

  <pre class="idl">[Exposed=(Window,Worker)]
interface <a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a> {
  void <a href="#offscreencontext2d-commit-2" id="the-offscreen-2d-rendering-context:offscreencontext2d-commit-2">commit</a>();
  readonly attribute <a href="#offscreencanvas" id="the-offscreen-2d-rendering-context:offscreencanvas">OffscreenCanvas</a> <a href="#offscreencontext2d-canvas-2" id="the-offscreen-2d-rendering-context:offscreencontext2d-canvas-2">canvas</a>;
};

<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-2">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasstate" id="the-offscreen-2d-rendering-context:canvasstate">CanvasState</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-3">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvastransform" id="the-offscreen-2d-rendering-context:canvastransform">CanvasTransform</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-4">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvascompositing" id="the-offscreen-2d-rendering-context:canvascompositing">CanvasCompositing</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-5">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasimagesmoothing" id="the-offscreen-2d-rendering-context:canvasimagesmoothing">CanvasImageSmoothing</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-6">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasfillstrokestyles" id="the-offscreen-2d-rendering-context:canvasfillstrokestyles">CanvasFillStrokeStyles</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-7">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasshadowstyles" id="the-offscreen-2d-rendering-context:canvasshadowstyles">CanvasShadowStyles</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-8">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasfilters" id="the-offscreen-2d-rendering-context:canvasfilters">CanvasFilters</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-9">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasrect" id="the-offscreen-2d-rendering-context:canvasrect">CanvasRect</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-10">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasdrawpath" id="the-offscreen-2d-rendering-context:canvasdrawpath">CanvasDrawPath</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-11">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasdrawimage" id="the-offscreen-2d-rendering-context:canvasdrawimage">CanvasDrawImage</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-12">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvasimagedata" id="the-offscreen-2d-rendering-context:canvasimagedata">CanvasImageData</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-13">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvaspathdrawingstyles" id="the-offscreen-2d-rendering-context:canvaspathdrawingstyles">CanvasPathDrawingStyles</a>;
<a href="#offscreencanvasrenderingcontext2d" id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-14">OffscreenCanvasRenderingContext2D</a> implements <a href="#canvaspath" id="the-offscreen-2d-rendering-context:canvaspath">CanvasPath</a>;
</pre>

  <p>The <dfn id="offscreencanvasrenderingcontext2d"><code>OffscreenCanvasRenderingContext2D</code></dfn> is a rendering context
  interface for drawing to the <a href="#offscreencanvas-bitmap" id="the-offscreen-2d-rendering-context:offscreencanvas-bitmap">bitmap</a> of an
  <code id="the-offscreen-2d-rendering-context:offscreencanvas-2"><a href="#offscreencanvas">OffscreenCanvas</a></code> object. It is similar to <code id="the-offscreen-2d-rendering-context:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code>,
  with the following differences:</p>
  <ul><li><p><a href="#canvastext" id="the-offscreen-2d-rendering-context:canvastext">text rendering</a> is not supported;</p></li><li><p>there is no support for <a href="#canvasuserinterface" id="the-offscreen-2d-rendering-context:canvasuserinterface">user interface</a>
   features;</p></li><li><p>its <code id="the-offscreen-2d-rendering-context:offscreencontext2d-canvas-2-2"><a href="#offscreencontext2d-canvas-2">canvas</a></code> attribute refers to an
   <code id="the-offscreen-2d-rendering-context:offscreencanvas-3"><a href="#offscreencanvas">OffscreenCanvas</a></code> object rather than a <code id="the-offscreen-2d-rendering-context:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> element;</p></li><li><p>it has a <code id="the-offscreen-2d-rendering-context:offscreencontext2d-commit-2-2"><a href="#offscreencontext2d-commit-2">commit()</a></code> method for pushing the
   rendered image to the context's <code id="the-offscreen-2d-rendering-context:offscreencanvas-4"><a href="#offscreencanvas">OffscreenCanvas</a></code> object's <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder">placeholder <code>canvas</code> element</a>.</p></li></ul>

  <p>An <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-15"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code> object has a <dfn id="offscreencontext2d-bitmap">bitmap</dfn> that is initialized when the object is
  created.</p>

  <p>The <a href="#offscreencontext2d-bitmap" id="the-offscreen-2d-rendering-context:offscreencontext2d-bitmap">bitmap</a> has an <dfn id="offscreencontext2d-origin-clean">origin-clean</dfn> flag, which can be set to true or
  false. Initially, when one of these bitmaps is created, its <a href="#offscreencontext2d-origin-clean" id="the-offscreen-2d-rendering-context:offscreencontext2d-origin-clean">origin-clean</a> flag must be set to true.</p>

  <p>An <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-16"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code> object also has an <dfn id="offscreencontext2d-alpha">alpha</dfn> flag, which can be set to true or false. Initially,
  when the context is created, its alpha flag must be set to true. When an
  <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-17"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code> object has its <a href="#offscreencontext2d-alpha" id="the-offscreen-2d-rendering-context:offscreencontext2d-alpha">alpha</a> flag set to false, then its alpha channel must be
  fixed to 1.0 (fully opaque) for all pixels, and attempts to change the alpha component of any pixel
  must be silently ignored.</p>

  <p>An <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-18"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code> object has an <dfn id="associated-offscreencanvas-object">associated
  <code>OffscreenCanvas</code> object</dfn>, which is the <code id="the-offscreen-2d-rendering-context:offscreencanvas-5"><a href="#offscreencanvas">OffscreenCanvas</a></code> object
  from which the <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-19"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code> object was created.

  </p><dl class="domintro"><dt><var>offscreenCanvasRenderingContext2D</var> . <code id="offscreencontext2d-commit"><a href="#offscreencontext2d-commit-2">commit</a></code>()</dt><dd>
    <p>Copies the rendering context's <a href="#offscreencontext2d-bitmap" id="the-offscreen-2d-rendering-context:offscreencontext2d-bitmap-2">bitmap</a> to
    the bitmap of the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-2">placeholder <code>canvas</code>
    element</a> of the <a href="#associated-offscreencanvas-object" id="the-offscreen-2d-rendering-context:associated-offscreencanvas-object">associated <code>OffscreenCanvas</code> object</a>. The copy
    operation is asynchronous.</p>
   </dd><dt><var>offscreenCanvas</var> = <var>offscreenCanvasRenderingContext2D</var> . <code id="offscreencontext2d-canvas"><a href="#offscreencontext2d-canvas-2">canvas</a></code></dt><dd>
    <p>Returns the <a href="#associated-offscreencanvas-object" id="the-offscreen-2d-rendering-context:associated-offscreencanvas-object-2">associated <code>OffscreenCanvas</code> object</a>.</p>
   </dd></dl>

  
  <p>The <dfn id="offscreen-2d-context-creation-algorithm">offscreen 2D context creation algorithm</dfn>, which is passed a
  <var>target</var> (an <code id="the-offscreen-2d-rendering-context:offscreencanvas-6"><a href="#offscreencanvas">OffscreenCanvas</a></code> object) and optionally some arguments,
  consists of running the following steps:</p>

  <ol><li><p>If the algorithm was passed some arguments, let <var>arg</var> be the first such
   argument. Otherwise, let <var>arg</var> be undefined.</p></li><li><p>Let <var>settings</var> be the result of <a href="#coerce-context-arguments-for-2d" id="the-offscreen-2d-rendering-context:coerce-context-arguments-for-2d">coercing the <var>arg</var> context arguments
   for 2D</a>.</p></li><li><p>Let <var>context</var> be a new <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-20"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code>
   object.</p></li><li><p>Set <var>context</var>'s <a href="#associated-offscreencanvas-object" id="the-offscreen-2d-rendering-context:associated-offscreencanvas-object-3">associated <code>OffscreenCanvas</code> object</a> to
   <var>target</var>.</p></li><li><p>Process each of the members of <var>settings</var> as follows:</p>
    <dl><dt><code id="the-offscreen-2d-rendering-context:dom-canvasrenderingcontext2dsettings-alpha"><a href="#dom-canvasrenderingcontext2dsettings-alpha">alpha</a></code></dt><dd>If false, set <var>context</var>'s <a href="#offscreencontext2d-alpha" id="the-offscreen-2d-rendering-context:offscreencontext2d-alpha-2">alpha</a>
     flag to false.</dd></dl>
   </li><li><p>Set <var>context</var>'s <a href="#offscreencontext2d-bitmap" id="the-offscreen-2d-rendering-context:offscreencontext2d-bitmap-3">bitmap</a> to a newly
   created bitmap with the dimensions specified by the <code id="the-offscreen-2d-rendering-context:dom-offscreencanvas-width-2"><a href="#dom-offscreencanvas-width-2">width</a></code> and <code id="the-offscreen-2d-rendering-context:dom-offscreencanvas-height-2"><a href="#dom-offscreencanvas-height-2">height</a></code> attributes of <var>target</var>, and set
   <var>target</var>'s bitmap to the same bitmap (so that they are shared).</p></li><li><p>If <var>context</var>'s <a href="#offscreencontext2d-alpha" id="the-offscreen-2d-rendering-context:offscreencontext2d-alpha-3">alpha</a> flag is set
   to true, initialize all the pixels of <var>context</var>'s <a href="#offscreencontext2d-bitmap" id="the-offscreen-2d-rendering-context:offscreencontext2d-bitmap-4">bitmap</a> to transparent black. Otherwise, initialize
   the pixels to opaque black.</p></li><li><p>Return <var>context</var>.</p></li></ol>

  <p>The <dfn id="offscreencontext2d-commit-2"><code>commit()</code></dfn> method, when invoked,
  must run the following steps:</p>

  <ol><li><p>If this <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-21"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code>'s <a href="#associated-offscreencanvas-object" id="the-offscreen-2d-rendering-context:associated-offscreencanvas-object-4">associated
    <code>OffscreenCanvas</code> object</a> does not have a <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-3">placeholder <code>canvas</code> element</a>, abort
    these steps.</p></li><li><p>Let <var>image</var> be a copy of this <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-22"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code>'s
    <a href="#offscreencontext2d-bitmap" id="the-offscreen-2d-rendering-context:offscreencontext2d-bitmap-5">bitmap</a>, including the value of its <a href="#offscreencontext2d-origin-clean" id="the-offscreen-2d-rendering-context:offscreencontext2d-origin-clean-2">origin-clean</a> flag.</p></li><li>
     <p><a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="the-offscreen-2d-rendering-context:queue-a-task">Queue a task</a> in the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-4">placeholder <code>canvas</code> element</a>'s
     <a href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="the-offscreen-2d-rendering-context:relevant-settings-object">relevant settings object</a>'s <a href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop" id="the-offscreen-2d-rendering-context:responsible-event-loop">responsible event loop</a> (which will be a
     <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="the-offscreen-2d-rendering-context:browsing-context">browsing context</a> <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="the-offscreen-2d-rendering-context:event-loop">event loop</a>) to set the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-5">placeholder <code>canvas</code> element</a>'s
     <a href="#output-bitmap" id="the-offscreen-2d-rendering-context:output-bitmap">output bitmap</a> to be a reference to <var>image</var>.</p>

     <p class="note">If <var>image</var> has different dimensions than the bitmap previously
     referenced as the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-6">placeholder <code>canvas</code>
     element</a>'s <a href="#output-bitmap" id="the-offscreen-2d-rendering-context:output-bitmap-2">output bitmap</a>, then this task will result in a change in
     the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-7">placeholder <code>canvas</code>
     element</a>'s <a data-x-internal="intrinsic-dimensions" href="https://drafts.csswg.org/css2/conform.html#intrinsic" id="the-offscreen-2d-rendering-context:intrinsic-dimensions">intrinsic size</a>, which can affect
     document layout.</p>
    </li></ol>

  <p class="note">Implementations are encouraged to short-circuit the graphics update steps of
  the <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="the-offscreen-2d-rendering-context:browsing-context-2">browsing context</a> <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="the-offscreen-2d-rendering-context:event-loop-2">event loop</a> for the purposes of updating the
  contents of a <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-8">placeholder <code>canvas</code>
  element</a> to the display. This could mean, for example, that the <code id="the-offscreen-2d-rendering-context:offscreencontext2d-commit-2-3"><a href="#offscreencontext2d-commit-2">commit()</a></code> method can copy the bitmap contents directly
  to a graphics buffer that is mapped to the physical display location of the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-9">placeholder <code>canvas</code> element</a>. This or
  similar short-circuiting approaches can significantly reduce display latency, especially in cases
  where the <code id="the-offscreen-2d-rendering-context:offscreencontext2d-commit-2-4"><a href="#offscreencontext2d-commit-2">commit()</a></code> method is invoked from a worker
  and the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="the-offscreen-2d-rendering-context:event-loop-3">event loop</a> of the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-10">placeholder <code>canvas</code> element</a>'s
  <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="the-offscreen-2d-rendering-context:browsing-context-3">browsing context</a> is busy. However, such shortcuts can not have any
  script-observable side-effects. This means that the committed bitmap still needs to be sent to
  the <a href="#offscreencanvas-placeholder" id="the-offscreen-2d-rendering-context:offscreencanvas-placeholder-11">placeholder <code>canvas</code> element</a>, in
  case the element is used as a <code id="the-offscreen-2d-rendering-context:canvasimagesource"><a href="#canvasimagesource">CanvasImageSource</a></code>, as an
  <code id="the-offscreen-2d-rendering-context:imagebitmapsource"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource">ImageBitmapSource</a></code>, or in case <code id="the-offscreen-2d-rendering-context:dom-canvas-todataurl-2"><a href="#dom-canvas-todataurl-2">toDataURL()</a></code>
  or <code id="the-offscreen-2d-rendering-context:dom-canvas-toblob-2"><a href="#dom-canvas-toblob-2">toBlob()</a></code> are called on it.</p>

  <p>The <dfn id="offscreencontext2d-canvas-2"><code>canvas</code></dfn> attribute, on getting,
  must return this <code id="the-offscreen-2d-rendering-context:offscreencanvasrenderingcontext2d-23"><a href="#offscreencanvasrenderingcontext2d">OffscreenCanvasRenderingContext2D</a></code>'s <a href="#associated-offscreencanvas-object" id="the-offscreen-2d-rendering-context:associated-offscreencanvas-object-5">associated
  <code>OffscreenCanvas</code> object</a>.

  </p>

  
  <h5 id="colour-spaces-and-colour-correction"><span class="secno">4.12.5.4</span> Color spaces and color correction<a class="self-link" href="#colour-spaces-and-colour-correction"/></h5>

  <p>The <code id="colour-spaces-and-colour-correction:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> APIs must perform color correction at only two points: when rendering
  images with their own gamma correction and color space information onto a bitmap, to convert the
  image to the color space used by the bitmaps (e.g. using the 2D Context's <code id="colour-spaces-and-colour-correction:dom-context-2d-drawimage"><a href="#dom-context-2d-drawimage">drawImage()</a></code> method with an
  <code id="colour-spaces-and-colour-correction:htmlorsvgimageelement"><a href="#htmlorsvgimageelement">HTMLOrSVGImageElement</a></code> object), and when rendering the actual canvas bitmap to the
  output device.</p>

  <p class="note">Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
  match colors obtained through the <code id="colour-spaces-and-colour-correction:dom-context-2d-getimagedata-2"><a href="#dom-context-2d-getimagedata-2">getImageData()</a></code> method.</p>

  <p>The <code id="colour-spaces-and-colour-correction:dom-canvas-todataurl-2"><a href="#dom-canvas-todataurl-2">toDataURL()</a></code> method, when invoked, must not
  include color space information in the resources they return. Where the output format allows it,
  the color of pixels in resources created by <code id="colour-spaces-and-colour-correction:dom-canvas-todataurl-2-2"><a href="#dom-canvas-todataurl-2">toDataURL()</a></code>
  must match those returned by the <code id="colour-spaces-and-colour-correction:dom-context-2d-getimagedata-2-2"><a href="#dom-context-2d-getimagedata-2">getImageData()</a></code>
  method.</p>

  <p>In user agents that support CSS, the color space used by a <code id="colour-spaces-and-colour-correction:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> element must
  match the color space used for processing any colors for that element in CSS.</p>

  <p>The gamma correction and color space information of images must be handled in such a way that
  an image rendered directly using an <code id="colour-spaces-and-colour-correction:the-img-element"><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">img</a></code> element would use the same colors as one
  painted on a <code id="colour-spaces-and-colour-correction:the-canvas-element-3"><a href="#the-canvas-element">canvas</a></code> element that is then itself rendered. Furthermore, the rendering
  of images that have no color correction information (such as those returned by the <code id="colour-spaces-and-colour-correction:dom-canvas-todataurl-2-3"><a href="#dom-canvas-todataurl-2">toDataURL()</a></code> method) must be rendered with no color
  correction.</p>

  <p class="note">Thus, in the 2D context, calling the <code id="colour-spaces-and-colour-correction:dom-context-2d-drawimage-2"><a href="#dom-context-2d-drawimage">drawImage()</a></code> method to render the output of the <code id="colour-spaces-and-colour-correction:dom-canvas-todataurl-2-4"><a href="#dom-canvas-todataurl-2">toDataURL()</a></code> method to the canvas, given the appropriate
  dimensions, has no visible effect.</p>

  
  <h5 id="serialising-bitmaps-to-a-file"><span class="secno">4.12.5.5</span> Serializing bitmaps to a file<a class="self-link" href="#serialising-bitmaps-to-a-file"/></h5>

  
  <p>When a user agent is to create <dfn id="a-serialisation-of-the-bitmap-as-a-file">a
  serialization of the bitmap as a file</dfn>, given an optional <var>type</var> and
  <var>quality</var>, it must create an image file in the format given by <var>type</var>, or if
  <var>type</var> was not supplied, in the PNG format. If an error occurs during the creation of
  the image file (e.g. an internal encoder error), then the result of the serialization is null.
  <a href="https://html.spec.whatwg.org/multipage/references.html#refsPNG">[PNG]</a></p>

  <p>The image file's pixel data must be the bitmap's pixel data scaled to one image pixel per
  coordinate space unit, and if the file format used supports encoding resolution metadata, the
  resolution must be given as 96dpi (one image pixel per <a data-x-internal="'px'" href="https://drafts.csswg.org/css-values/#px" id="serialising-bitmaps-to-a-file:'px'">CSS pixel</a>).</p>

  <p>If <var>type</var> is supplied, then it must be interpreted as a <a data-x-internal="mime-type" href="https://mimesniff.spec.whatwg.org/#mime-type" id="serialising-bitmaps-to-a-file:mime-type">MIME
  type</a> giving the format to use. If the type has any parameters, then it must be treated as
  not supported.</p>

  <p class="example">For example, the value &quot;<code id="serialising-bitmaps-to-a-file:image/png"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/png">image/png</a></code>&quot; would mean to generate a PNG
  image, the value &quot;<code id="serialising-bitmaps-to-a-file:image/jpeg"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/jpeg">image/jpeg</a></code>&quot; would mean to generate a JPEG image, and the value
  &quot;<code id="serialising-bitmaps-to-a-file:image/svg+xml"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/svg+xml">image/svg+xml</a></code>&quot; would mean to generate an SVG image (which would require that the
  user agent track how the bitmap was generated, an unlikely, though potentially awesome,
  feature).</p>

  <p>User agents must support PNG (&quot;<code id="serialising-bitmaps-to-a-file:image/png-2"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/png">image/png</a></code>&quot;). User agents may support other types.
  If the user agent does not support the requested type, then it must create the file using the PNG
  format. <a href="https://html.spec.whatwg.org/multipage/references.html#refsPNG">[PNG]</a></p>

  <p>User agents must <a data-x-internal="converted-to-ascii-lowercase" href="https://infra.spec.whatwg.org/#ascii-lowercase" id="serialising-bitmaps-to-a-file:converted-to-ascii-lowercase">convert the provided type to ASCII
  lowercase</a> before establishing if they support that type.</p>

  <p>For image types that do not support an alpha channel, the serialized image must be the bitmap
  image composited onto a solid black background using the source-over operator.</p>

  <p>If <var>type</var> is an image format that supports variable quality (such as
  &quot;<code id="serialising-bitmaps-to-a-file:image/jpeg-2"><a href="https://html.spec.whatwg.org/multipage/indices.html#image/jpeg">image/jpeg</a></code>&quot;) and <var>quality</var> is given, then, if <a data-x-internal="js-type" href="https://tc39.github.io/ecma262/#sec-ecmascript-data-types-and-values" id="serialising-bitmaps-to-a-file:js-type">Type</a>(<var>quality</var>) is Number, and <var>quality</var> is in the range
  0.0 to 1.0 inclusive, the user agent must treat <var>quality</var> as the desired quality level.
  If <a data-x-internal="js-type" href="https://tc39.github.io/ecma262/#sec-ecmascript-data-types-and-values" id="serialising-bitmaps-to-a-file:js-type-2">Type</a>(<var>quality</var>) is not Number, or if <var>quality</var>
  is outside that range, the user agent must use its default quality value, as if the
  <var>quality</var> argument had not been given.</p>

  <p class="note">The use of type-testing here, instead of simply declaring <var>quality</var> as
  a Web IDL <code>double</code>, is a historical artifact.</p>

  
  <h5 id="security-with-canvas-elements"><span class="secno">4.12.5.6</span> Security with <code id="security-with-canvas-elements:the-canvas-element"><a href="#the-canvas-element">canvas</a></code> elements<a class="self-link" href="#security-with-canvas-elements"/></h5>

  <p><i>This section is non-normative.</i></p>

  <p><strong>Information leakage</strong> can occur if scripts from one <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin" id="security-with-canvas-elements:concept-origin">origin</a> can
  access information (e.g. read pixels) from images from another origin (one that isn't the <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="security-with-canvas-elements:same-origin">same</a>).</p>

  <p>To mitigate this, bitmaps used with <code id="security-with-canvas-elements:the-canvas-element-2"><a href="#the-canvas-element">canvas</a></code> elements and <code id="security-with-canvas-elements:imagebitmap"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code>
  objects are defined to have a flag indicating whether they are <a href="#concept-canvas-origin-clean" id="security-with-canvas-elements:concept-canvas-origin-clean">origin-clean</a>. All bitmaps start with their <a href="#concept-canvas-origin-clean" id="security-with-canvas-elements:concept-canvas-origin-clean-2">origin-clean</a> set to true. The flag is set to false
  when cross-origin images are used.</p>

  <p>The <code id="security-with-canvas-elements:dom-canvas-todataurl-2"><a href="#dom-canvas-todataurl-2">toDataURL()</a></code>, <code id="security-with-canvas-elements:dom-canvas-toblob-2"><a href="#dom-canvas-toblob-2">toBlob()</a></code>, and <code id="security-with-canvas-elements:dom-context-2d-getimagedata-2"><a href="#dom-context-2d-getimagedata-2">getImageData()</a></code> methods check the flag and will
  throw a <a data-x-internal="securityerror" href="https://heycam.github.io/webidl/#securityerror" id="security-with-canvas-elements:securityerror">&quot;<code>SecurityError</code>&quot;</a> <code id="security-with-canvas-elements:domexception"><a data-x-internal="domexception" href="https://heycam.github.io/webidl/#dfn-DOMException">DOMException</a></code> rather than leak
  cross-origin data.</p>

  <p>The value of the <a href="#concept-canvas-origin-clean" id="security-with-canvas-elements:concept-canvas-origin-clean-3">origin-clean</a> flag is
  propagated from a source <code id="security-with-canvas-elements:the-canvas-element-3"><a href="#the-canvas-element">canvas</a></code> element's bitmap to a new <code id="security-with-canvas-elements:imagebitmap-2"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code>
  object by <code id="security-with-canvas-elements:dom-createimagebitmap-2"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap-2">createImageBitmap()</a></code>. Conversely, a
  destination <code id="security-with-canvas-elements:the-canvas-element-4"><a href="#the-canvas-element">canvas</a></code> element's bitmap will have its <a href="#concept-canvas-origin-clean" id="security-with-canvas-elements:concept-canvas-origin-clean-4">origin-clean</a> flags set to false by <code id="security-with-canvas-elements:dom-context-2d-drawimage"><a href="#dom-context-2d-drawimage">drawImage</a></code> if the source image is an
  <code id="security-with-canvas-elements:imagebitmap-3"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> object whose bitmap has its <a href="#concept-canvas-origin-clean" id="security-with-canvas-elements:concept-canvas-origin-clean-5">origin-clean</a> flag set to false.</p>

  <p>The flag can be reset in certain situations; for example, when changing the value of the
  <code id="security-with-canvas-elements:attr-canvas-width"><a href="#attr-canvas-width">width</a></code> or the <code id="security-with-canvas-elements:attr-canvas-height"><a href="#attr-canvas-height">height</a></code> content attribute of the <code id="security-with-canvas-elements:the-canvas-element-5"><a href="#the-canvas-element">canvas</a></code> element
  to which a <code id="security-with-canvas-elements:canvasrenderingcontext2d"><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> is bound, the bitmap is
  cleared and its <a href="#concept-canvas-origin-clean" id="security-with-canvas-elements:concept-canvas-origin-clean-6">origin-clean</a> flag is reset.</p>

  <p>When using an <code id="security-with-canvas-elements:imagebitmaprenderingcontext"><a href="#imagebitmaprenderingcontext">ImageBitmapRenderingContext</a></code>, the value of the <a href="#concept-canvas-origin-clean" id="security-with-canvas-elements:concept-canvas-origin-clean-7">origin-clean</a> flag is propagated from
  <code id="security-with-canvas-elements:imagebitmap-4"><a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmap">ImageBitmap</a></code> objects when they are transferred to the <code id="security-with-canvas-elements:the-canvas-element-6"><a href="#the-canvas-element">canvas</a></code>
  via <a href="#dom-imagebitmaprenderingcontext-transferfromimagebitmap-2" id="security-with-canvas-elements:dom-imagebitmaprenderingcontext-transferfromimagebitmap-2">transferFromImageBitmap()</a>.</p>

  
  </body></html>