Skip to content
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -66274,6 +66274,7 @@ interface <dfn interface>CanvasRenderingContext2D</dfn> {
<span>CanvasRenderingContext2D</span> includes <span>CanvasDrawPath</span>;
<span>CanvasRenderingContext2D</span> includes <span>CanvasUserInterface</span>;
<span>CanvasRenderingContext2D</span> includes <span>CanvasText</span>;
<span>CanvasRenderingContext2D</span> includes <span>CanvasDrawElement</span>;
<span>CanvasRenderingContext2D</span> includes <span>CanvasDrawImage</span>;
<span>CanvasRenderingContext2D</span> includes <span>CanvasImageData</span>;
<span>CanvasRenderingContext2D</span> includes <span>CanvasPathDrawingStyles</span>;
Expand Down Expand Up @@ -66393,6 +66394,12 @@ interface mixin <dfn interface>CanvasText</dfn> {
<span>TextMetrics</span> <span data-x="dom-context-2d-measureText">measureText</span>(DOMString text);
};

interface mixin <dfn interface>CanvasDrawElement</dfn> {
// drawing elements
undefined <span data-x="dom-context-2d-drawElement">drawElement</span>(<span>Element</span> element, unrestricted double x, unrestricted double y);
undefined <span data-x="dom-context-2d-drawElement">drawElement</span>(<span>Element</span> element, unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double y);
};

interface mixin <dfn interface>CanvasDrawImage</dfn> {
// drawing images
undefined <span data-x="dom-context-2d-drawImage">drawImage</span>(<span>CanvasImageSource</span> image, unrestricted double dx, unrestricted double dy);
Expand Down Expand Up @@ -70681,6 +70688,55 @@ try {

</div>


<h6>Drawing elements</h6>

<dl class="domintro">
<dt><code data-x=""><var>context</var>.<span subdfn data-x="dom-context-2d-drawElement">drawElement</span>(<var>image</var>, <var>x</var>, <var>y</var>)</code></dt>
<dt><code data-x=""><var>context</var>.<span data-x="dom-context-2d-drawElement">drawElement</span>(<var>image</var>, <var>x</var>, <var>y</var>, <var>w</var>, <var>h</var>)</code></dt>

<dd>
<p>Draws the given element onto the canvas. Throws a <code>TypeError</code> if the element isn't
a descendant of the canvas.</p>
</dd>
</dl>

<div w-nodev>

<p>Objects that implement the <code>CanvasDrawElement</code> interface have the <dfn method
for="CanvasDrawElement"><code data-x="dom-context-2d-drawElement">drawElement()</code></dfn>
method to draw elements.</p>

<p>When the <code data-x="dom-context-2d-drawElement">drawElement()</code> method is invoked, the user
agent must run these steps:</p>

<ol>
<li><p>πŸ‘‹ Let <var>element</var> be the first argument.</p>

<li><p>If any of the arguments are infinite or NaN, then return.</p></li>

<li><p>Let <var>usability</var> be the result of πŸ‘‹.</p></li>

<li><p>If <var>usability</var> is <i>bad</i>, then return (without drawing anything).</p></li>

<li><p>πŸ‘‹ Update the rendering without painting.</p></li>
<!-- If w/h arguments are given, should that be an input to layout here?
And if not, is the layout totally unconstrained, infinite width?? -->

<li><p>πŸ‘‹ Let <var>layoutBox</var> be <var>element</var>'s CSS layout box.</p></li>

<li><p>If not specified, the <var>w</var> and <var>h</var> arguments must default to the width
and height of <var>layoutBox</var>.</p></li>

<li><p>If either <var>w</var> or <var>h</var> are zero, then return.</p></li>

<li><p>πŸ‘‹ Paint <var>element</var> to the specified rectangular area without using any
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why limit what can be painted rather than simply tainting the canvas? I guess many use cases won't need any readback.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/WICG/html-in-canvas does have a tainting mode, but we've been discussing whether we should keep it. The issue is that we can't do the same for WebGL and WebGPU, because the pixels can always be exfiltrated using shaders.

<span>CORS-cross-origin</span> data.</p></li>
</ol>

</div>


<h6>Drawing images</h6>

<p>Objects that implement the <code>CanvasDrawImage</code> interface have the <dfn method
Expand Down