Skip to content

Commit

Permalink
Add canvas filters
Browse files Browse the repository at this point in the history 
Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=25243
  • Loading branch information
@alijuma
alijuma committed Apr 4, 2016
1 parent 50d7221 commit b3a0cbb
Showing 1 changed file with 113 additions and 6 deletions.
119 changes: 113 additions & 6 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3929,6 +3929,20 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/script.html#ScriptElement">SVG <code>script</code></dfn> element
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#SVGElement">SVG <code>svg</code></dfn> element
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#TitleElement">SVG <code>title</code></dfn> element
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#UseElement">SVG
<code>use</code></dfn> element
</ul>
</dd>


<dt>Filter Effects</dt>

<dd>
<p>The following feature is defined in the <cite>Filter Effects</cite> specification:
<ref spec=FILTERS></p>

<ul class="brief">
<li><dfn data-noexport="" data-x-href="https://drafts.fxtf.org/filters/#typedef-filter-function-list">&lt;filter-function-list&gt;</dfn></li>
</ul>
</dd>

Expand Down Expand Up @@ -60097,6 +60111,7 @@ interface <dfn>CanvasRenderingContext2D</dfn> {
<span>CanvasRenderingContext2D</span> implements <span>CanvasImageSmoothing</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasFillStrokeStyles</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasShadowStyles</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasFilters</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasRect</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasDrawPath</span>;
<span>CanvasRenderingContext2D</span> implements <span>CanvasUserInterface</span>;
Expand Down Expand Up @@ -60180,6 +60195,12 @@ interface <dfn>CanvasShadowStyles</dfn> {
attribute DOMString <span data-x="dom-context-2d-shadowColor">shadowColor</span>; // (default transparent black)
};

[NoInterfaceObject]
interface <dfn>CanvasFilters</dfn> {
// filters
attribute DOMString <span data-x="dom-context-2d-filter">filter</span>; // (default "none")
};

[NoInterfaceObject]
interface <dfn>CanvasRect</dfn> {
// rects
Expand Down Expand Up @@ -60772,6 +60793,7 @@ context.fillRect(100,0,50,50); // only this square remains</pre>
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>, <code
data-x="dom-context-2d-font">font</code>, <code
data-x="dom-context-2d-textAlign">textAlign</code>, <code
Expand Down Expand Up @@ -65665,7 +65687,82 @@ function AddCloud(data, x, y) { ... }</pre>
<p>If the current composition operation is <code data-x="gcop-copy">copy</code>, shadows
effectively won't render (since the shape will overwrite the shadow).</p>

<h6>Filters</h6>

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

<dl class="domintro">

<dt><var>context</var> . <code subdfn data-x="dom-context-2d-filter">filter</code> [ = <var>value</var> ]</dt>

<dd>

<p>Returns the current filter.</p>

<p>Can be set, to change the filter. Values that cannot be parsed as a
<span>&lt;filter-function-list&gt;</span> value are ignored.</p>

</dd>

</dl>

<div w-nodev>

<p>The <code data-x="dom-context-2d-filter">filter</code> attribute, on getting, must
return the last value it was successfully set to. The value must not be re-serialized. On setting,
if the new value is 'none' (not the empty string, null, or undefined), filters must be disabled
for the context. Otherwise, the value must be parsed as a
<span>&lt;filter-function-list&gt;</span> value. If the value cannot be parsed as a
<span>&lt;filter-function-list&gt;</span> value, where using property-independent style sheet
syntax like 'inherit' or 'initial' is considered an invalid value, then it must be ignored, and
the attribute must retain its previous value. When creating the object implementing the
<code>CanvasFilters</code> interface, the attribute must be set to 'none'.</p>

<p>A <span>&lt;filter-function-list&gt;</span> value consists of a sequence of one or more
filter functions or references to SVG filters. The input to the filter is used as the input
to the first item in the list. Subsequent items take the output of the previous item as
their input. <ref spec="FILTERS"></p>

<p>Coordinates used in the value of the <code
data-x="dom-context-2d-filter">filter</code> attribute are interpreted such that one pixel is
equivalent to one SVG user space unit and to one canvas coordinate space unit. Filter coordinates
are not affected by the <span data-x="dom-context-2d-transformation">current transformation
matrix</span>. The current transformation matrix affects only the input to the filter. Filters
are applied in the <span>output bitmap</span>'s coordinate space.</p>

<p>When the value of the <code data-x="dom-context-2d-filter">filter</code> attribute defines
lengths using percentages or using <span>'em'</span> or <span>'ex'</span> units, these must be
interpreted relative to the <span>computed value</span> of the <span>'font-size'</span> property
of the <span>font style source object</span> at the time that the attribute is set, if it is an
element. If the <span data-x="computed value">computed values</span> are undefined for a
particular case (e.g. because the <span>font style source object</span> is not an element or is
not <span>being rendered</span>), then the relative keywords must be interpreted relative to the
default value of the <code data-x="dom-context-2d-font">font</code> attribute. The 'larger' and
'smaller' keywords are not supported.</p>

<p>If the value of the <code data-x="dom-context-2d-filter">filter</code> attribute refers to an
SVG filter in the same document, and this SVG filter changes, the changed filter is used for the
next draw operation.</p>

<p>If the value of the <code data-x="dom-context-2d-filter">filter</code> attribute refers to an
SVG filter in an external resource document and that document is not loaded when a drawing
operation is invoked, the drawing operation must proceed with no filtering.</p>

</div>

<h6>Working with externally-defined SVG filters</h6>

<!-- NON-NORMATIVE SECTION -->

<p>Since drawing is peformed using filter value 'none' until an externally-defined
filter has finished loading, authors may wish to determine whether such a filter
has finished loading before proceeding with a drawing operation. One way to accomplish
this is to load the externally-defined filter elsewhere within the same page in some
element that sends a <code data-x="">load</code> event (for example, an <span>SVG
<code>use</code></span> element), and wait for the <code data-x="">load</code> event to be
dispatched.</p>

<div w-nodev>

Expand All @@ -65680,19 +65777,25 @@ function AddCloud(data, x, y) { ... }</pre>
and line styles must be honored, and the stroke must itself also be subjected to the current
transformation matrix.</p></li>

<li><p><span>When shadows are drawn</span>, render the shadow from image <var>A</var>,
using the current shadow styles, creating image <var>B</var>.</p></li>
<li><p>When the filter attribute is set to a value other than 'none' and all the
externally-defined filters it references, if any, are in documents that are currently loaded,
then use image <var>A</var> as the input to the <code
data-x="dom-context-2d-filter">filter</code>, creating image <var>B</var>. Otherwise, let
<var>B</var> be an alias for <var>A</var>.</p></li>

<li><p><span>When shadows are drawn</span>, multiply the alpha component of every pixel in <var>B</var> by <code data-x="dom-context-2d-globalAlpha">globalAlpha</code>.</p></li>
<li><p><span>When shadows are drawn</span>, render the shadow from image <var>B</var>,
using the current shadow styles, creating image <var>C</var>.</p></li>

<li><p><span>When shadows are drawn</span>, composite <var>B</var> within the
<li><p><span>When shadows are drawn</span>, multiply the alpha component of every pixel in <var>C</var> by <code data-x="dom-context-2d-globalAlpha">globalAlpha</code>.</p></li>

<li><p><span>When shadows are drawn</span>, composite <var>C</var> within the
<span>clipping region</span> over the current <span>output bitmap</span> using the <span>current
composition operator</span>.</p></li>

<li><p>Multiply the alpha component of every pixel in <var>A</var> by <code
<li><p>Multiply the alpha component of every pixel in <var>B</var> by <code
data-x="dom-context-2d-globalAlpha">globalAlpha</code>.</p></li>

<li><p>Composite <var>A</var> within the <span>clipping region</span> over the current
<li><p>Composite <var>B</var> within the <span>clipping region</span> over the current
<span>output bitmap</span> using the <span>current composition operator</span>.</p></li>

</ol>
Expand Down Expand Up @@ -116735,6 +116838,9 @@ INSERT INTERFACES HERE
<dt id="refsFILEAPI">[FILEAPI]</dt>
<dd><cite><a href="https://w3c.github.io/FileAPI/">File API</a></cite>, A. Ranganathan. W3C.</dd>

<dt id="refsFILTERS">[FILTERS]</dt>
<dd><cite><a href="https://drafts.fxtf.org/filters/">Filter Effects</a></cite>, D. Jackson, E. Dahlström, D. Schulze. W3C.</dd>

<dt id="refsFULLSCREEN">[FULLSCREEN]</dt>
<dd><cite><a href="https://fullscreen.spec.whatwg.org/">Fullscreen</a></cite>, A. van Kesteren, T. &Ccedil;elik. WHATWG.</dd>

Expand Down Expand Up @@ -117102,6 +117208,7 @@ INSERT INTERFACES HERE
Alexey Feldgendler,
&#1040;&#1083;&#1077;&#1082;&#1089;&#1077;&#1081; &#1055;&#1088;&#1086;&#1089;&#1082;&#1091;&#1088;&#1103;&#1082;&#1086;&#1074; (Alexey Proskuryakov),
Alexis Deveria,
Ali Juma,
Alice Boxhall,
Allan Clements,
Allen Wirfs-Brock,
Expand Down

0 comments on commit b3a0cbb

Please sign in to comment.