@@ -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"><filter-value-list></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
6218962185interface 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<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<<span>CanvasFilterInput</span>>) filters);
62187+ attribute DOMString <span data-x="dom-context-2d-filter">filter</span>; // (default "none")
6219962188};
6220062189
6220162190interface 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><filter-value-list></span>, or a
67354- <code>CanvasFilter</code> object .</p>
67344+ data-x="">none</code>" or a string parseable as a <span><filter-value-list></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><filter-value-list> </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><filter-value-list></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 <number>s</code>", then return <code
67463- data-x="">sequence<long long></code>.</p></li>
67464-
67465- <li><p>If <var>type</var> is <code data-x="">"<number-optional-number></code>", "<code
67466- data-x=""><number></code>", or "<code data-x=""><integer></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<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 <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><filter-value-list></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