Skip to content

Add imageSmoothingQuality property to CanvasRenderingContext2D. Fixes #98. #136

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

Closed
wants to merge 1 commit into from
Closed

Add imageSmoothingQuality property to CanvasRenderingContext2D. Fixes #98. #136

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
66 changes: 58 additions & 8 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61820,6 +61820,8 @@ dictionary <dfn>CanvasRenderingContext2DSettings</dfn> {
boolean <span data-x="dom-CanvasRenderingContext2DSettings-alpha">alpha</span> = true;
};

enum <dfn>ImageSmoothingQuality</dfn> { "<span data-x="dom-context-2d-imageSmoothingQuality-low">low</span>", "<span data-x="dom-context-2d-imageSmoothingQuality-medium">medium</span>", "<span data-x="dom-context-2d-imageSmoothingQuality-high">high</span>" };

[<span data-x="dom-context-2d">Constructor</span>(),
<span data-x="dom-context-2d">Constructor</span>(unsigned long width, unsigned long height),
Exposed=(Window,Worker)]
Expand Down Expand Up @@ -61865,6 +61867,7 @@ interface <dfn>CanvasRenderingContext2D</dfn> {

// image smoothing
attribute boolean <span data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</span>; // (default true)
attribute <span>ImageSmoothingQuality</span> <span data-x="dom-context-2d-imageSmoothingQuality">imageSmoothingQuality</span>; // (default low)
<!--
// v7 we've also received requests for:
- turning off antialiasing to avoid seams when patterns are painted next to each other
Expand Down Expand Up @@ -62584,6 +62587,28 @@ context.fillRect(100,0,50,50); // only this square remains</pre>
<p>If a point is not outside a shape, it is inside the shape.</p>


<hr>

<p>The <code>ImageSmoothingQuality</code> enumeration is used to express a preference for the
interpolation quality to use when smoothing images.</p>

<p>The "<dfn><code data-x="dom-context-2d-imageSmoothingQuality-low">low</code></dfn>" value
indicates a preference for a low level of image interpolation quality. Low-quality image
interpolation may be more computationally efficient than higher settings.</p>

<p>The "<dfn><code data-x="dom-context-2d-imageSmoothingQuality-medium">medium</code></dfn>" value
indicates a preference for a medium level of image interpolation quality.</p>

<p>The "<dfn><code data-x="dom-context-2d-imageSmoothingQuality-high">high</code></dfn>" value
indicates a preference for a high level of image interpolation quality. High-quality image
interpolation may be more computationally expensive than lower settings.</p>

<p class="note">Bilinear scaling is an example of a relatively fast, lower-quality image-smoothing
algorithm. Bicubic or Lanczos scaling are examples of image-smoothing algorithms that produce
higher-quality output. This specification does not mandate that specific interpolation algorithms
be used.</p>


<h6>Implementation notes</h6>

<!-- NON-NORMATIVE SECTION -->
Expand Down Expand Up @@ -62640,7 +62665,8 @@ context.fillRect(100,0,50,50); // only this square remains</pre>
data-x="dom-context-2d-textAlign">textAlign</code>, <code
data-x="dom-context-2d-textBaseline">textBaseline</code>, <code
data-x="dom-context-2d-direction">direction</code>, <code
data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>.</li>
data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>, <code
data-x="dom-context-2d-imageSmoothingQuality">imageSmoothingQuality</code>.</li>
<li>The current <span>dash list</span>.</li>
</ul>

Expand Down Expand Up @@ -65244,12 +65270,14 @@ try {
<p>If the original image data is a bitmap image, the value painted at a point in the area of the
repetitions is computed by filtering the original image data. When scaling up, if the <code
data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code> attribute is set to
false, the image must be rendered using nearest-neighbor interpolation. Otherwise, the user agent
may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor). When
such a filtering algorithm requires a pixel value from outside the original image data, it must
instead use the value from wrapping the pixel's coordinates to the original image's dimensions.
(That is, the filter uses 'repeat' behaviour, regardless of the value of the pattern's repetition
behaviour.)</p>
false, the image must be rendered using nearest-neighbor interpolation. Otherwise, the user
agent may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor).
User agents which support multiple filtering algorithms may use the value of the <code
data-x="dom-context-2d-imageSmoothingQuality">imageSmoothingQuality</code> attribute to guide
the choice of filtering algorithm. When such a filtering algorithm requires a pixel value from
outside the original image data, it must instead use the value from wrapping the pixel's
coordinates to the original image's dimensions. (That is, the filter uses 'repeat' behaviour,
regardless of the value of the pattern's repetition behaviour.)</p>
<!-- drawImage() has similar paragraphs with different rules -->

</li>
Expand Down Expand Up @@ -66233,7 +66261,11 @@ v6DVT (also check for '- -' bits in the part above) -->
<p>When scaling up, if the <code
data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code> attribute is set to
true, the user agent should attempt to apply a smoothing algorithm to the image data when it is
scaled. Otherwise, the image must be rendered using nearest-neighbor interpolation.</p>
scaled. User agents which support multiple filtering algorithms may use the value of the <code
data-x="dom-context-2d-imageSmoothingQuality">imageSmoothingQuality</code> attribute to guide
the choice of filtering algorithm when the <code
data-x="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code> attribute is set to
true. Otherwise, the image must be rendered using nearest-neighbor interpolation.</p>

<p class="note">This specification does not define the precise algorithm to use when scaling an
image down, or when scaling an image up when the <code
Expand Down Expand Up @@ -67572,6 +67604,17 @@ function AddCloud(data, x, y) { ... }</pre>

</dd>

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

<dd>

<p>Returns the current image-smoothing-quality preference.</p>

<p>Can be set, to change the preferred quality of image smoothing. Unknown values are
ignored.</p>

</dd>

</dl>

<div w-nodev>
Expand All @@ -67581,6 +67624,11 @@ function AddCloud(data, x, y) { ... }</pre>
new value. When the <code>CanvasRenderingContext2D</code> object is created, the attribute must be
set to true.</p>

<p>The <dfn><code data-x="dom-context-2d-imageSmoothingQuality">imageSmoothingQuality</code></dfn>
attribute, on getting, must return the last value it was set to. On setting, it must be set to the
new value. When the <code>CanvasRenderingContext2D</code> object is created, the attribute must be
set to "<code data-x="dom-context-2d-imageSmoothingQuality-low">low</code>".</p>

</div>


Expand Down Expand Up @@ -118329,6 +118377,7 @@ INSERT INTERFACES HERE
DeWitt Clinton,
Dean Edridge,
Dean Edwards,
Dean Jackson,
Debi Orton,
Derek Featherstone,
Devarshi Pant,
Expand Down Expand Up @@ -118523,6 +118572,7 @@ INSERT INTERFACES HERE
Karl Dubost,
Karl Tomlinson,
Kartikaya Gupta,
Kat Graff,
Kathy Walton,
Kelly Ford,
Kelly Norton,
Expand Down