Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add lowLatency flag to CanvasRenderingContext2DSettings #4360

Merged
merged 12 commits into from
Mar 20, 2019
Merged

Add lowLatency flag to CanvasRenderingContext2DSettings #4360

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1328391
Add lowLatency flag to CanvasRenderingContext2DSettings.
kenrussell Dec 11, 2018
584b752
Address review feedback; add citation for front buffering
kenrussell Dec 15, 2018
feeb223
Address review feedback from annevk
kenrussell Jan 21, 2019
36e6971
nit
annevk Jan 22, 2019
757b7c8
Rewritten for more clarity
yell0wd0g Mar 5, 2019
57dffa0
churn
yell0wd0g Mar 8, 2019
f66a50b
@travisleithead comment
yell0wd0g Mar 13, 2019
f7e7e8a
Clarify |desynchronized| true value
yell0wd0g Mar 14, 2019
353153a
review nits as commit
annevk Mar 15, 2019
fd0967f
Using where appropriated
yell0wd0g Mar 18, 2019
bbd950b
Using 'may' or 'might' where appropriated
yell0wd0g Mar 18, 2019
a2ae3f8
s/normal DOM cycle/event loop/
yell0wd0g Mar 20, 2019
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
96 changes: 64 additions & 32 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60064,6 +60064,7 @@ enum <dfn>CanvasFillRule</dfn> { "<span data-x="dom-context-2d-fillRule-nonzero"

dictionary <dfn>CanvasRenderingContext2DSettings</dfn> {
boolean <span data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</span> = true;
boolean <span data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</span> = false;
};

enum <dfn>ImageSmoothingQuality</dfn> { "<span data-x="dom-context-2d-imageSmoothingQuality-low">low</span>", "<span data-x="dom-context-2d-imageSmoothingQuality-medium">medium</span>", "<span data-x="dom-context-2d-imageSmoothingQuality-high">high</span>" };
Expand Down Expand Up @@ -60316,36 +60317,38 @@ interface <dfn>Path2D</dfn> {
objects.</p>

<dl class="domintro">

<dt><var>context</var> = <var>canvas</var> . <code data-x="dom-canvas-getContext">getContext</code>('2d' [, { [ <code data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</code>: false ] } ] )</dt>

<dt><var>context</var> = <var>canvas</var> . <code data-x="dom-canvas-getContext">getContext</code>('2d' [, { [ <code data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</code>: true ] [, <code data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</code>: false ] } ] )</dt>
<dd>

<p>Returns a <code>CanvasRenderingContext2D</code> object that is permanently bound to a
particular <code>canvas</code> element.</p>

<p>If the <code data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</code> setting is
provided and set to false, then the canvas is forced to always be opaque.</p>
<p>If the <code data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</code> member is
false, then the context is forced to always be opaque.</p>

<p>If the <code
data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</code> member is
true, then the context might be <span
annevk marked this conversation as resolved.
Show resolved Hide resolved
data-x="concept-canvas-desynchronized">desynchronized</span>.</p>
</dd>

<dt><var>context</var> . <code subdfn data-x="dom-context-2d-canvas">canvas</code></dt>

<dd>

<p>Returns the <code>canvas</code> element.</p>

</dd>

<dt><var>attributes</var> = <var>canvas</var> . <code data-x="dom-context-2d-canvas-getcontextattributes">getContextAttributes</code>()</dt>

<dd>
<p>Returns an object whose:</p>

<p>Returns an object whose <code data-x="concept-canvas-alpha">alpha</code> member is true if
the context has an alpha channel, or false if it was forced to be opaque.</p>
<ul>
<li><code data-x="concept-canvas-alpha">alpha</code> member is true if the context has an alpha
channel, or false if it was forced to be opaque.</li>

<li><code data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</code>
member is true if the context can be <span
data-x="concept-canvas-desynchronized">desynchronized</span>.</li>
</ul>
</dd>

</dl>

<div w-nodev>
Expand All @@ -60361,12 +60364,11 @@ interface <dfn>Path2D</dfn> {
<!--REMOVE-TOPIC:Security-->

<p>The <code>CanvasRenderingContext2D</code> object also has an <dfn
data-x="concept-canvas-alpha">alpha</dfn> flag, which can be set to true or false. Initially,
when the context is created, its <span data-x="concept-canvas-alpha">alpha</span> flag must be
set to true. When a <code>CanvasRenderingContext2D</code> object has its <span
data-x="concept-canvas-alpha">alpha</span> 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>
data-x="concept-canvas-alpha">alpha</dfn> boolean. When a
<code>CanvasRenderingContext2D</code> object's <span
data-x="concept-canvas-alpha">alpha</span> is 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 <span>opaque black</span> instead
of <span>transparent black</span>; <code data-x="dom-context-2d-clearRect">clearRect()</code>
Expand All @@ -60376,14 +60378,43 @@ interface <dfn>Path2D</dfn> {
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 <span>output
bitmap</span>'s alpha channel; for instance, drawing a 50% transparent white square on a freshly
created <span>output bitmap</span> with its <span data-x="concept-canvas-alpha">alpha</span>
flag set to false will result in a fully-opaque gray square.</p>
created <span>output bitmap</span> with its <span data-x="concept-canvas-alpha">alpha</span> set
to false will result in a fully-opaque gray square.</p>

<p>The <code>CanvasRenderingContext2D</code> object also has a <dfn
data-x="concept-canvas-desynchronized">desynchronized</dfn> boolean. When a
<code>CanvasRenderingContext2D</code> object's <span
data-x="concept-canvas-desynchronized">desynchronized</span> is true, then the user agent may
annevk marked this conversation as resolved.
Show resolved Hide resolved
optimize the rendering of the canvas to reduce the latency, as measured from input events to
rasterization, by desynchronizing the canvas paint cycle from the event loop, bypassing the
Copy link
Member

Choose a reason for hiding this comment

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

"normal DOM cycle" should be "event loop", right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes ofc, done.

ordinary user agent rendering algorithm, or both. Insofar as this mode involves bypassing the
usual paint mechanisms, rasterization, or both, it might introduce visible tearing artifacts.</p>

yell0wd0g marked this conversation as resolved.
Show resolved Hide resolved
<p class="note">The user agent usually renders on a buffer which is not being displayed, quickly
swapping it and the one being scanned out for presentation; the former buffer is called
back buffer and the latter <i>front buffer</i>. A popular technique for reducing latency is called
front buffer rendering, also known as <i>single buffer</i> rendering, where rendering happens in
annevk marked this conversation as resolved.
Show resolved Hide resolved
parallel and racily with the scanning out process. This technique reduces the latency at the price
of potentially introducing tearing artifacts and can be used to implement in total or part of the
<span data-x="concept-canvas-desynchronized">desynchronized</span> boolean. <ref
spec=MULTIPLEBUFFERING></p>

<p class="note">The <span data-x="concept-canvas-desynchronized">desynchronized</span> boolean
can be useful when implementing certain kinds of applications, such as drawing applications,
annevk marked this conversation as resolved.
Show resolved Hide resolved
where the latency between input and rasterization is critical.</p>

<p>The <dfn><code
data-x="dom-context-2d-canvas-getcontextattributes">getContextAttributes()</code></dfn> method,
when invoked, must return a <code>CanvasRenderingContext2DSettings</code> dictionary whose <code
data-x="concept-canvas-alpha">alpha</code> member is set to true if this context's <span
data-x="concept-canvas-alpha">alpha</span> flag is set, and false otherwise.</p>
when invoked, must return a <code>CanvasRenderingContext2DSettings</code> dictionary containing
the following members:</p>

<ul>
<li><p><code data-x="concept-canvas-alpha">alpha</code>, set to this context's <span
data-x="concept-canvas-alpha">alpha</span>.</p></li>

<li><p><code data-x="concept-canvas-desynchronized">desynchronized</code>, set to this context's
<span data-x="concept-canvas-desynchronized">desynchronized</span>.</p></li>
</ul>

<hr>

Expand Down Expand Up @@ -60439,15 +60470,13 @@ interface <dfn>Path2D</dfn> {
data-x="attr-canvas-width">width</code> and <code data-x="attr-canvas-height">height</code>
content attributes.</p></li>

<li>
<p>Process each of the members of <var>settings</var> as follows:</p>
<li><p>Set <var>context</var>'s <span data-x="concept-canvas-alpha">alpha</span> to
<var>settings</var>'s <dfn><code
data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</code></dfn>.</p></li>

<dl>
<dt><dfn><code data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</code></dfn></dt>
<dd>If false, then set <var>context</var>'s <span data-x="concept-canvas-alpha">alpha</span>
flag to false.</dd>
</dl>
</li>
<li><p>Set <var>context</var>'s <span
data-x="concept-canvas-desynchronized">desynchronized</span> to <var>settings</var>'s <dfn><code
data-x="dom-CanvasRenderingContext2DSettings-desynchronized">desynchronized</code></dfn>.</p></li>

<li><p>Return <var>context</var>.</p></li>
</ol>
Expand Down Expand Up @@ -121759,6 +121788,9 @@ INSERT INTERFACES HERE
<dt id="refsMQ">[MQ]</dt>
<dd><cite><a href="https://drafts.csswg.org/mediaqueries/">Media Queries</a></cite>, H. Lie, T. &Ccedil;elik, D. Glazman, A. van Kesteren. W3C.</dd>

<dt id="refsMULTIPLEBUFFERING">[MULTIPLEBUFFERING]</dt>
<dd>(Non-normative) <cite><a href="https://en.wikipedia.org/wiki/Multiple_buffering">Multiple buffering</a></cite>. Wikipedia.</dd>

<dt id="refsNAVMODEL">[NAVMODEL]</dt>
<dd><cite><a href="https://arxiv.org/abs/1608.05444">A Model of Navigation History</a></cite>. C. Brewster, A. Jeffrey.</dd>

Expand Down