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

Layers for Canvas #7542

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Layers for Canvas #7542

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a6c74f9
Initial change
Juanmihd Jan 27, 2022
b82ee01
Adding missing part
Juanmihd Jan 28, 2022
9b3378f
Adding missing part
Juanmihd Jan 28, 2022
1f29ba6
Fixing typo
Juanmihd Jan 31, 2022
e640272
Fixing missed references
Juanmihd Jan 31, 2022
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
51 changes: 51 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61869,6 +61869,12 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
<dd><p>Returns true if the rendering context was lost. Context loss can occur due to driver
crashes, running out of memory, etc. In these cases, the canvas loses its backing storage and
takes steps to <span>reset the rendering context to its default state</span>.</p></dd>

<dt><var>context</var> . <code subdfn data-x="dom-context-2d-beginLayer">beginLayer</code>()</dt>
<dd><p>Pushes the current state onto the stack and creates a new layer.</p></dd>

<dt><var>context</var> . <code subdfn data-x="dom-context-2d-endLayer">endLayer</code>()</dt>
<dd><p>Pops the top state on the stack, restoring the context to that state, and closes and render the layer.</p></dd>
</dl>

<div w-nodev>
Expand Down Expand Up @@ -61900,6 +61906,51 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
data-x="dom-context-2d-isContextLost">isContextLost()</code></dfn> method steps are to return
<span>this</span>'s <span data-x="concept-canvas-context-lost">context lost</span>.</p>

<p>The <dfn method for="CanvasState"><code data-x="dom-context-2d-beginLayer">beginLayer()</code></dfn> method
steps are to push a copy of the current drawing state onto the drawing state stack and to <span>create a new layer for the canvas</span>.</p>

<p>The <dfn method for="CanvasState"><code data-x="dom-context-2d-endLayer">endLayer()</code></dfn> method
steps are to popo the top entry in the drawing state stack, and reset the trawing state it describes, it will also <span>close the current layer for the canvas</span>. If there is no layer saved, then the method must do nothing.</p>
</div>

<h6>Canvas layer</h6>

<p>The <code>CanvasState</code> interface allows the usage of layers with <code data-x="dom-context-2d-beginLayer">beginLayer()</code> and <code data-x="dom-context-2d-endLayer">endLayer()</code>. The layers will interact with a series of <dfn data-x="layer drawing attributes">layer drawing atributes</dfn> that consist of:</p>

<ul class="brief">
<li>The current <span data-x="dom-context-2d-transformation">transformation matrix</span>.</li>
<li>The current <span>clipping region</span>.</li>
<li>The current values of the following attributes: <code
data-x="dom-context-2d-globalAlpha">globalAlpha</code>, <code
data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code>, <code
data-x="dom-context-2d-shadowOffsetY">shadowOffsetY</code>, <code
data-x="dom-context-2d-shadowBlur">shadowBlur</code>, <code
data-x="dom-context-2d-shadowColor">shadowColor</code>, <code
data-x="dom-context-2d-filter">filter</code>, <code
data-x="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>.</li>
</ul>

<p class="note">The layer only exists as an expansion of the state stack. <code data-x="dom-context-2d-beginLayer">beginLayer()</code> and <code data-x="dom-context-2d-endLayer">endLayer()</code> has to behave the same way as <code data-x="dom-context-2d-save">save()</code> and <code data-x="dom-context-2d-restore">restore()</code>.</p>
<div w-nodev>

<p>To <dfn>create a new layer for the canvas</dfn>:</p>

<ol>
<li><p>Captures the current <code>CanvasState</code> with all the information of the <span>drawing state</span> that will be used to render this layer.</p></li>

<li><p>Reset everything that layer drawing atributes consists of to their initial values.</p></li>
</ol>

<p>To <dfn>close the current layer for the canvas</dfn>:</p>

<ol>
<li><p>Render the layer with the <span>drawing state</span> that was captured in <code data-x="dom-context-2d-beginLayer">beginLayer()</code>.</p></li>
</ol>

<p>If a Canvas layer stayed open at the end of the frame, as in, missing the appropriate <code data-x="dom-context-2d-endLayer">endLayer()</code>. The layer will instantly be closed for this frame. In the next frame a new canvas layer will be created, with the similar <span>drawing state</span> captured in case that in the next frame appears the missing <code data-x="dom-context-2d-endLayer">endLayer()</code>.</p>

<p class="note">When rendering the Canvas layer it has to behave the same way as if creating an auxiliary canvas with the content of the layer, and drawing it to the original canvas with the <code data-x="dom-context-2d-drawImage">drawImage()</code> method.</p>

</div>

<h6>Line styles</h6>
Expand Down