@@ -4207,8 +4207,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
4207
4207
<li><dfn data-x-href="https://svgwg.org/svg2-draft/struct.html#TitleElement">SVG <code>title</code></dfn> element</li>
4208
4208
<li><dfn data-x-href="https://svgwg.org/svg2-draft/struct.html#UseElement">SVG <code>use</code></dfn> element</li>
4209
4209
<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>
4212
4210
</ul>
4213
4211
</dd>
4214
4212
@@ -4221,8 +4219,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
4221
4219
4222
4220
<ul class="brief">
4223
4221
<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>
4226
4222
</ul>
4227
4223
</dd>
4228
4224
@@ -62188,14 +62184,7 @@ interface mixin <dfn interface>CanvasShadowStyles</dfn> {
62188
62184
62189
62185
interface mixin <dfn interface>CanvasFilters</dfn> {
62190
62186
// 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")
62199
62188
};
62200
62189
62201
62190
interface mixin <dfn interface>CanvasRect</dfn> {
@@ -67340,76 +67329,50 @@ console.log(pixels.data[2]);
67340
67329
67341
67330
<h6>Filters</h6>
67342
67331
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
67345
67334
data-x="dom-context-2d-filter">filter</code></dfn> attribute.</p>
67346
67335
67347
67336
<dl class="domintro">
67348
67337
<dt><code data-x=""><var>context</var>.<span subdfn data-x="dom-context-2d-filter">filter</span> [ = <var>value</var> ]</code></dt>
67338
+
67349
67339
<dd>
67350
67340
<p>Returns the current filter.</p>
67351
67341
67342
+
67352
67343
<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>
67355
67346
</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>
67368
67347
</dl>
67369
67348
67370
67349
<div w-nodev>
67371
67350
67372
67351
<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
67374
67353
data-x="concept-canvas-current-filter">current filter</span> is set to the string "<code
67375
67354
data-x="">none</code>". Whenever the value of the <span
67376
67355
data-x="concept-canvas-current-filter">current filter</span> is the string "<code
67377
67356
data-x="">none</code>" filters will be disabled for the context.</p>
67378
67357
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
-
67386
67358
<p>The <code data-x="dom-context-2d-filter">filter</code> getter steps are to return
67387
67359
<span>this</span>'s <span data-x="concept-canvas-current-filter">current filter</span>.</p>
67388
67360
67389
67361
<p>The <code data-x="dom-context-2d-filter">filter</code> setter steps are:</p>
67390
67362
67391
67363
<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>
67394
67367
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>
67399
67372
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>
67404
67374
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
67413
67376
filter</span> to the given value.</p></li>
67414
67377
</ol>
67415
67378
@@ -67424,220 +67387,6 @@ console.log(pixels.data[2]);
67424
67387
undefined</code> are all treated as unparseable inputs and the value of the <span
67425
67388
data-x="concept-canvas-current-filter">current filter</span> is left unchanged.</p>
67426
67389
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
-
67641
67390
<p>Coordinates used in the value of the <span data-x="concept-canvas-current-filter">current
67642
67391
filter</span> are interpreted such that one pixel is equivalent to one SVG user space unit and to
67643
67392
one canvas coordinate space unit. Filter coordinates are not affected by the <span
@@ -67701,12 +67450,7 @@ context.filter = new CanvasFilter([
67701
67450
the input to the <span data-x="concept-canvas-current-filter">current filter</span>, creating
67702
67451
image <var>B</var>. If the <span data-x="concept-canvas-current-filter">current filter</span>
67703
67452
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>
67710
67454
67711
67455
<p>Otherwise, let <var>B</var> be an alias for <var>A</var>.</p>
67712
67456
</li>
0 commit comments