Skip to content

Commit c7ad099

Browse files
annevkdomenic
andauthored
Revert most of "Add CanvasFilter objects as possible 2D context filters"
It did not have implementer agreement after all. This reverts most of commit 5db6a65, keeping some of the editorial refactorings. Co-authored-by: Domenic Denicola <[email protected]>
1 parent 22d8cdb commit c7ad099

File tree

1 file changed

+18
-274
lines changed

1 file changed

+18
-274
lines changed

source

Lines changed: 18 additions & 274 deletions
Original file line numberDiff line numberDiff line change
@@ -4207,8 +4207,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
42074207
<li><dfn data-x-href="https://svgwg.org/svg2-draft/struct.html#TitleElement">SVG <code>title</code></dfn> element</li>
42084208
<li><dfn data-x-href="https://svgwg.org/svg2-draft/struct.html#UseElement">SVG <code>use</code></dfn> element</li>
42094209
<li><dfn data-x-href="https://svgwg.org/svg2-draft/painting.html#TextRendering">SVG <code>text-rendering</code></dfn> property</li>
4210-
<li><dfn data-x-href="https://svgwg.org/svg2-draft/struct.html#TermCoreAttribute">core attribute</dfn></li>
4211-
<li><dfn data-x-href="https://svgwg.org/svg2-draft/styling.html#PresentationAttributes">presentation attribute</dfn></li>
42124210
</ul>
42134211
</dd>
42144212

@@ -4221,8 +4219,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
42214219

42224220
<ul class="brief">
42234221
<li><dfn data-x-href="https://drafts.fxtf.org/filter-effects/#typedef-filter-value-list">&lt;filter-value-list&gt;</dfn></li>
4224-
<li><dfn data-x-href="https://drafts.fxtf.org/filter-effects/#filter-primitive-attributes">filter primitive attribute</dfn></li>
4225-
<li><dfn data-x-href="https://drafts.fxtf.org/filter-effects/#FilterProperty">filter property</dfn></li>
42264222
</ul>
42274223
</dd>
42284224

@@ -62188,14 +62184,7 @@ interface mixin <dfn interface>CanvasShadowStyles</dfn> {
6218862184

6218962185
interface mixin <dfn interface>CanvasFilters</dfn> {
6219062186
// filters
62191-
attribute (DOMString or <span>CanvasFilter</span>) <span data-x="dom-context-2d-filter">filter</span>; // (default "none")
62192-
};
62193-
62194-
typedef record&lt;DOMString, any> <dfn>CanvasFilterInput</dfn>;
62195-
62196-
[Exposed=(Window,Worker,PaintWorklet)]
62197-
interface <dfn interface>CanvasFilter</dfn> {
62198-
<span data-x="dom-CanvasFilter">constructor</span>(optional (<span>CanvasFilterInput</span> or sequence&lt;<span>CanvasFilterInput</span>>) filters);
62187+
attribute DOMString <span data-x="dom-context-2d-filter">filter</span>; // (default "none")
6219962188
};
6220062189

6220162190
interface mixin <dfn interface>CanvasRect</dfn> {
@@ -67340,76 +67329,50 @@ console.log(pixels.data[2]);
6734067329

6734167330
<h6>Filters</h6>
6734267331

67343-
<p>All drawing operations on an object which implements the <code>CanvasFilters</code> interface
67344-
are affected by the global <dfn attribute for="CanvasFilters"><code
67332+
<p>All drawing operations on an object which implements the <code>CanvasFilters</code>
67333+
interface are affected by the global <dfn attribute for="CanvasFilters"><code
6734567334
data-x="dom-context-2d-filter">filter</code></dfn> attribute.</p>
6734667335

6734767336
<dl class="domintro">
6734867337
<dt><code data-x=""><var>context</var>.<span subdfn data-x="dom-context-2d-filter">filter</span> [ = <var>value</var> ]</code></dt>
67338+
6734967339
<dd>
6735067340
<p>Returns the current filter.</p>
6735167341

67342+
6735267343
<p>Can be set, to change the filter. Values can either be the string "<code
67353-
data-x="">none</code>", a string parseable as a <span>&lt;filter-value-list&gt;</span>, or a
67354-
<code>CanvasFilter</code> object.</p>
67344+
data-x="">none</code>" or a string parseable as a <span>&lt;filter-value-list&gt;</span>. Other
67345+
values are ignored.</p>
6735567346
</dd>
67356-
67357-
<dt><code data-x=""><var>filter</var> = new <span subdfn data-x="dom-CanvasFilter">CanvasFilter</span>(<var>input</var>)</code></dt>
67358-
<dd><p>Constructs a new <code data-x="dom-CanvasFilter">CanvasFilter</code> from the properties
67359-
of the <var>input</var> object. These properties include a <code data-x="">filter</code>
67360-
property, whose value is one of the <span>supported filter names</span>, and additionally can
67361-
include properties corresponding to the settings for the filter. These latter properties are the
67362-
same as the XML attribute names when using the corresponding SVG filters.</p></dd>
67363-
67364-
<dt><code data-x=""><var>filter</var> = new <span data-x="dom-CanvasFilter">CanvasFilter</span>(<var>inputs</var>)</code></dt>
67365-
<dd><p>Constructs a new <code data-x="dom-CanvasFilter">CanvasFilter</code> from the
67366-
<var>inputs</var> array. Each element in the array is an input as described for the previous
67367-
overload. They are composed in sequence to create the final filter.</p></dd>
6736867347
</dl>
6736967348

6737067349
<div w-nodev>
6737167350

6737267351
<p>Such objects have an associated <dfn data-x="concept-canvas-current-filter">current
67373-
filter</dfn>, which is either a string or a <code>CanvasFilter</code>. Initially the <span
67352+
filter</dfn>, which is a string. Initially the <span
6737467353
data-x="concept-canvas-current-filter">current filter</span> is set to the string "<code
6737567354
data-x="">none</code>". Whenever the value of the <span
6737667355
data-x="concept-canvas-current-filter">current filter</span> is the string "<code
6737767356
data-x="">none</code>" filters will be disabled for the context.</p>
6737867357

67379-
<p>A <code>CanvasFilter</code> is an interface for creating SVG filters using JavaScript. A
67380-
<code>CanvasFilter</code> has an associated <dfn
67381-
data-x="concept-concept-canvasfilter-xml-filter-list">XML filter list</dfn>. An <span
67382-
data-x="concept-concept-canvasfilter-xml-filter-list">XML filter list</span> is a
67383-
<span>list</span> of <span>XML element data for filters</span> that fully describes an SVG filter
67384-
network. It is set during construction of the <code>CanvasFilter</code>.</p>
67385-
6738667358
<p>The <code data-x="dom-context-2d-filter">filter</code> getter steps are to return
6738767359
<span>this</span>'s <span data-x="concept-canvas-current-filter">current filter</span>.</p>
6738867360

6738967361
<p>The <code data-x="dom-context-2d-filter">filter</code> setter steps are:</p>
6739067362

6739167363
<ol>
67392-
<li>
67393-
<p>If the given value is a string, then:</p>
67364+
<li><p>If the given value is "<code data-x="">none</code>", then set <span>this</span>'s <span
67365+
data-x="concept-canvas-current-filter">current filter</span> to "<code data-x="">none</code>"
67366+
and return.</p></li>
6739467367

67395-
<ol>
67396-
<li><p>If the given value is "<code data-x="">none</code>", then set <span>this</span>'s <span
67397-
data-x="concept-canvas-current-filter">current filter</span> to "<code data-x="">none</code>"
67398-
and return.</p></li>
67368+
<li><p>Let <var>parsedValue</var> be the result of <span data-x="parse something according to a
67369+
CSS grammar">parsing</span> the given values as a <span>&lt;filter-value-list&gt;</span>. If any
67370+
property-independent style sheet syntax like 'inherit' or 'initial' is present, then this
67371+
parsing must return failure.</p></li>
6739967372

67400-
<li><p>Let <var>parsedValue</var> be the result of <span data-x="parse something according to
67401-
a CSS grammar">parsing</span> the given values as a <span>&lt;filter-value-list&gt;</span>. If
67402-
any property-independent style sheet syntax like 'inherit' or 'initial' is present, then this
67403-
parsing must return failure.</p></li>
67373+
<li><p>If <var>parsedValue</var> is failure, then return.</p></li>
6740467374

67405-
<li><p>If <var>parsedValue</var> is failure, then return.</p></li>
67406-
67407-
<li><p>Set <span>this</span>'s <span data-x="concept-canvas-current-filter">current
67408-
filter</span> to the given value.</p></li>
67409-
</ol>
67410-
</li>
67411-
67412-
<li><p>Otherwise, set <span>this</span>'s <span data-x="concept-canvas-current-filter">current
67375+
<li><p>Set <span>this</span>'s <span data-x="concept-canvas-current-filter">current
6741367376
filter</span> to the given value.</p></li>
6741467377
</ol>
6741567378

@@ -67424,220 +67387,6 @@ console.log(pixels.data[2]);
6742467387
undefined</code> are all treated as unparseable inputs and the value of the <span
6742567388
data-x="concept-canvas-current-filter">current filter</span> is left unchanged.</p>
6742667389

67427-
<div w-nodev>
67428-
67429-
<p>For the construction of <code>CanvasFilter</code> objects, the following definitions are
67430-
needed:</p>
67431-
67432-
</div>
67433-
67434-
<p>The <dfn>supported filter names</dfn> are "<code data-x="">gaussianBlur</code>", "<code
67435-
data-x="">colorMatrix</code>", "<code data-x="">convolveMatrix</code>", and "<code
67436-
data-x="">componentTransfer</code>".
67437-
67438-
<div w-nodev>
67439-
67440-
<p>The <dfn>XML element data for filters</dfn> is a <span>struct</span>, with the following <span
67441-
data-x="struct item">items</span>:</p>
67442-
67443-
<ul>
67444-
<li><p>A string <dfn data-x="xml-filter-name">name</dfn></p></li>
67445-
67446-
<li><p>An <span data-x="ordered map">ordered map</span> of strings to strings <dfn
67447-
data-x="xml-filter-attributes">attributes</dfn></p></li>
67448-
67449-
<li><p>A list of <span>XML element data for filters</span> <dfn
67450-
data-x="xml-filter-children">children</dfn></p></li>
67451-
</ul>
67452-
67453-
<p>To get the <dfn>IDL type for a canvas filter attribute</dfn> <var>attrName</var>:</p>
67454-
67455-
<ol>
67456-
<li><p>Let <var>type</var> be the type listed for <var>attrName</var> in <cite>Filter
67457-
Effects</cite>. <ref spec=FILTERS></p></li>
67458-
67459-
<li><p>If <var>type</var> is "<code data-x="">false | true</code>", then return <code
67460-
data-x="idl-boolean">boolean</code>.</p></li>
67461-
67462-
<li><p>If <var>type</var> is "<code data-x="">list of &lt;number&gt;s</code>", then return <code
67463-
data-x="">sequence&lt;long long&gt;</code>.</p></li>
67464-
67465-
<li><p>If <var>type</var> is <code data-x="">"&lt;number-optional-number&gt;</code>", "<code
67466-
data-x="">&lt;number&gt;</code>", or "<code data-x="">&lt;integer&gt;</code>", then return <code
67467-
data-x="">long long</code>.</p></li>
67468-
67469-
<li><p>Return <code data-x="idl-DOMString">DOMString</code>.</p></li>
67470-
</ol>
67471-
67472-
<p>To <dfn data-x="generate-xml-value">generate an XML value</dfn> from a <var>key</var>,
67473-
<var>value</var> pair:
67474-
67475-
<ol>
67476-
<li><p>Let <var>type</var> be the result of getting the <span>IDL type for a canvas filter
67477-
attribute</span> for <var>key</var>.</p></li>
67478-
67479-
<li><p>Let <var>idlValue</var> be the result of <span
67480-
data-x="concept-idl-convert">converting</span> <var>value</var> to <var>type</var>.</p></li>
67481-
67482-
<li><p>Let <var>xmlValue</var> be the result of <span
67483-
data-x="concept-idl-convert">converting</span> <var>idlValue</var> to an ECMAScript value, and
67484-
then <span data-x="concept-idl-convert">converting</span> that result to a <code
67485-
data-x="idl-DOMString">DOMString</code>.</p></li>
67486-
67487-
<li><p>Return <var>xmlValue</var>.</p></li>
67488-
</ol>
67489-
67490-
<p>The <dfn constructor for="CanvasFilter"><code data-x="dom-CanvasFilter">new
67491-
CanvasFilter(<var>filters</var>)</code></dfn> constructor steps are:</p>
67492-
67493-
<ol>
67494-
<li><p>Let <var>xmlFilters</var> be an empty list.</p></li>
67495-
67496-
<li><p>If <var>filters</var> is a <code>CanvasFilterInput</code>, then set <var>filters</var> to
67497-
« <var>filters</var> ».</p></li>
67498-
67499-
<li>
67500-
<p>For each <var>filterDict</var> of <var>filters:</var></p>
67501-
67502-
<ol>
67503-
<li><p>If <var>filterDict</var>["<code data-x="">filter</code>"] does not <span data-x="map
67504-
exists">exist</span>, then throw a <code>TypeError</code>.</p></li>
67505-
67506-
<li><p>Let <var>filterName</var> be the value of <var>filterDict</var>["<code
67507-
data-x="">filter</code>"].</p></li>
67508-
67509-
<li><p>If <var>filterName</var> is not one of <span>supported filter names</span>, then
67510-
<span>continue</span>.</p></li>
67511-
67512-
<li><p>Let <var>xmlName</var> be the concatenation of "<code data-x="">fe</code>", the first
67513-
code unit of <var>filterName</var> <span>converted to ASCII uppercase</span>, and all code
67514-
units of <var>filterName</var> after the first one.</p></li>
67515-
67516-
<li><p>Let <var>xmlFilter</var> be a new <span>XML element data for filters</span> whose <span
67517-
data-x="xml-filter-name">name</span> is <var>xmlName</var>, whose <span
67518-
data-x="xml-filter-attributes">attributes</span> is an empty ordered map, and whose <span
67519-
data-x="xml-filter-children">children</span> is an empty list.</p></li>
67520-
67521-
<li><p><span data-x="list append">Append</span> <var>xmlFilter</var> to
67522-
<var>xmlFilters</var>.</p></li>
67523-
67524-
<li>
67525-
<p><span data-x="list iterate">For each</span> <var>key</var> → <var>value</var> of
67526-
<var>filterDict</var>:</p>
67527-
67528-
<ol>
67529-
<li>
67530-
<p>If any of the following are true:</p>
67531-
67532-
<ul>
67533-
<li><p><var>key</var> is not the local name of an attribute listed for the filter
67534-
primitive given by <var>xmlName</var> <ref spec=FILTERS></p></li>
67535-
67536-
<li><p><var>key</var> is the local name of a <span>core attribute</span></p></li>
67537-
67538-
<li><p><var>key</var> is the local name of a <span>presentation attribute</span></p></li>
67539-
67540-
<li><p><var>key</var> is the local name of a <span>filter primitive
67541-
attribute</span></p></li>
67542-
67543-
<li><p><var>key</var> is "<code data-x="">in</code>" or "<code
67544-
data-x="">filter</code>"</p></li>
67545-
67546-
<li><p><var>key</var> contains U+003A (:)</p></li>
67547-
</ul>
67548-
67549-
<p>then <span>continue</span>.</p>
67550-
</li>
67551-
67552-
<li>
67553-
<p>If <var>key</var> is one of "<code data-x="">funcR</code>", "<code
67554-
data-x="">funcG</code>", "<code data-x="">funcB</code>", "<code
67555-
data-x="">funcA</code>":</p>
67556-
67557-
<ol>
67558-
<li><p>Set <var>value</var> to the result of <span
67559-
data-x="concept-idl-convert">converting</span> <var>value</var> to <code
67560-
data-x="">record&lt;DOMString, any></code>.</p></li>
67561-
67562-
<li><p>Let <var>xmlTransferName</var> be the concatenation of "<code data-x="">fe</code>",
67563-
the first code unit of <var>key</var> <span>converted to ASCII uppercase</span>, and all
67564-
code units of name after the first one.</p></li>
67565-
67566-
<li><p>Let <var>transferFunction</var> be a new <span>XML element data for filters</span>
67567-
whose <span data-x="xml-filter-name">name</span> is <var>xmlTransferName</var>, whose
67568-
<span data-x="xml-filter-attributes">attributes</span> is an empty ordered map, and whose
67569-
<span data-x="xml-filter-children">children</span> is an empty list.</p></li>
67570-
67571-
<li>
67572-
<p>For each <var>transferName</var> → <var>transferValue</var> of <var>value</var>:</p>
67573-
67574-
<ol>
67575-
<li><p>Let <var>transferFunctionValue</var> be the result of <span
67576-
data-x="generate-xml-value">generating an XML value</span> from <var>transferName</var>
67577-
and <var>transferValue</var>.</p></li>
67578-
67579-
<li><p>Set <var>transferFunction</var>'s <span
67580-
data-x="xml-filter-attributes">attributes</span>[<var>key</var>] to
67581-
<var>transferFunctionValue</var>.</p></li>
67582-
</ol>
67583-
</li>
67584-
67585-
<li><p>Append <var>transferFunction</var> to <var>xmlFilter</var>'s <span
67586-
data-x="xml-filter-children">children</span>.</p></li>
67587-
</ol>
67588-
</li>
67589-
67590-
<li>
67591-
<p>Otherwise:</p>
67592-
67593-
<ol>
67594-
<li><p>Let <var>attrXMLValue</var> be the result of <span
67595-
data-x="generate-xml-value">generating an XML value</span> from <var>key</var> and
67596-
<var>value</var>.</p></li>
67597-
67598-
<li><p>Set <var>xmlFilter</var>'s <span
67599-
data-x="xml-filter-attributes">attributes</span>[<var>key</var>] to
67600-
<var>attrXMLValue</var>.</p></li>
67601-
</ol>
67602-
</li>
67603-
</ol>
67604-
</li>
67605-
</ol>
67606-
</li>
67607-
67608-
<li><p>Set <span>this</span>'s <span data-x="concept-concept-canvasfilter-xml-filter-list">XML
67609-
filter list</span> to <var>xmlFilters</var>.</p></li>
67610-
</ol>
67611-
67612-
</div>
67613-
67614-
<div class="example" id="example-canvas-filter">
67615-
<p>The following example will set the canvas's filter to a <code data-x="">colorMatrix</code>
67616-
filter that swaps the green and red channels, then blurs the result by 5 pixels:</p>
67617-
67618-
<pre><code class="js">// canvas is a reference to a &lt;canvas> element
67619-
const context = canvas.getContext('2d');
67620-
context.filter = new CanvasFilter([
67621-
{
67622-
filter: "colorMatrix",
67623-
type: "matrix",
67624-
values: [
67625-
0, 1, 0, 0, 0,
67626-
1, 0, 0, 0, 0,
67627-
0, 0, 1, 0, 0,
67628-
0, 0, 0, 1, 0
67629-
],
67630-
},
67631-
{
67632-
filter: "gaussianBlur",
67633-
stdDeviation: 5,
67634-
}
67635-
]);</code></pre>
67636-
</div>
67637-
67638-
<p class="note">Currently, <code>CanvasFilter</code>s can only be linked lists. Full filter
67639-
graphs are a planned expansion of this feature.</p>
67640-
6764167390
<p>Coordinates used in the value of the <span data-x="concept-canvas-current-filter">current
6764267391
filter</span> are interpreted such that one pixel is equivalent to one SVG user space unit and to
6764367392
one canvas coordinate space unit. Filter coordinates are not affected by the <span
@@ -67701,12 +67450,7 @@ context.filter = new CanvasFilter([
6770167450
the input to the <span data-x="concept-canvas-current-filter">current filter</span>, creating
6770267451
image <var>B</var>. If the <span data-x="concept-canvas-current-filter">current filter</span>
6770367452
is a string parseable as a <span>&lt;filter-value-list&gt;</span>, then draw using the <span
67704-
data-x="concept-canvas-current-filter">current filter</span> in the same manner as SVG. If the
67705-
<span data-x="concept-canvas-current-filter">current filter</span> is a
67706-
<code>CanvasFilter</code>, draw using the equivalent SVG for the XML structure stored in the
67707-
<span data-x="concept-canvas-current-filter">current filter</span>'s by mapping each
67708-
<span>filter property</span> of the <span
67709-
data-x="concept-concept-canvasfilter-xml-filter-list">XML filter list</span>.</p>
67453+
data-x="concept-canvas-current-filter">current filter</span> in the same manner as SVG.</p>
6771067454

6771167455
<p>Otherwise, let <var>B</var> be an alias for <var>A</var>.</p>
6771267456
</li>

0 commit comments

Comments
 (0)