[whatwg] Adding the imageSmoothingEnabled back into 2dContext Level 2 spec.

[Ashley Gullen]

I would re-emphasise this is important for many game applications.  Here's
an image showing the effect it can have from a recent blog post I wrote:
https://www.scirra.com/images/sampling-point-linear.png
For a game in this style it is essential to be able to force
nearest-neighbour.  Games in that "retro" style are often unplayable
because they look so awful if they get bilinear interpolation forced on
them.  On the other hand, modern hi-res style games which intend to use
bilinear interpolation only look marginally worse if they get
nearest-neighbour.  So I think the existing spec was fine as it was:
imageSmoothingEnabled = false means "require nearest-neighbour
interpolation", imageSmoothingEnabled = true means "any smoothing
algorithm, or nearest-neighbour".

I would also emphasise this should definitely also apply to patterns, for
the same reason: games are likely to use a pattern to render tiles, and
those should be rendered with the same interpolation as everything else.

Ashley



On 8 February 2013 12:25, Rik Cabanier <cabanier at gmail.com> wrote:

> I agree we should bring it back.
>
> Personally, it would be nice that have a more formal definition of what
> smoothing actually means so user agents can implement it similarly.
>
> Rik
>
> On Tue, Feb 5, 2013 at 7:14 AM, Jay Munro <jaymunro at microsoft.com> wrote:
>
> > For CR, we took the imageSmoothingEnable feature out because it hadn't
> > been given a chance to be discussed by the working group. For level 2,
> I'm
> > adding it back in, but asking for any discussion that needs to be made
> > first.
> >
> > Silence will be taken to mean there is no objection, but positive
> > responses are encouraged.  If I don't hear any objections by Monday Feb
> 11,
> > I'll check it in.
> >
> > The following is the pending check in:
> >
> >
> > @@ -40677,6 +40677,10 @@ dictionary <dfn>TrackEventInit</dfn> :
> > <span>EventInit</span> {
> >    // compositing
> >             attribute unrestricted double <span
> > title="dom-context-2d-globalAlpha">globalAlpha</span>; // (default 1.0)
> >             attribute DOMString <span
> >
> title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>;
> > // (default source-over)
> > +
> > +  // image smoothing
> > +           attribute boolean <span
> >
> title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</span>;
> > // (default true)
> > +
> >  <!--
> >    // v7 we've also received requests for:
> >    - turning off antialiasing to avoid seams when patterns are painted
> > next to each other
> > @@ -40945,7 +40949,8 @@ interface <dfn>Path</dfn> {
> >
> >
> title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</code>,
> > <code
> >     title="dom-context-2d-font">font</code>, <code
> >     title="dom-context-2d-textAlign">textAlign</code>, <code
> > -   title="dom-context-2d-textBaseline">textBaseline</code>.</li>
> > +   title="dom-context-2d-textBaseline">textBaseline</code>, <code
> > +
> >
> title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>.</li>
> >    </ul>
> >
> >    <p class="note">The <span>current default path</span> and the
> > @@ -43416,10 +43421,16 @@ 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. The user agent may use any filtering
> > +  the original image data. If the <code
> > +
> >
>  title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
> > +  then the user agent may use any filtering
> >    algorithm (for example bilinear interpolation or nearest-neighbor).
> > -  When the filtering algorithm requires a pixel value from outside the
> > -  original image data, it must instead use the value from wrapping the
> > +  If the <code
> > +
> >
>  title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
> > +  attribute is set to false, the image must be rendered using
> > +  nearest-neighbor interpolation. When such the 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' behavior, regardless of the value of
> >    <var title="">repetition</var>.)
> > @@ -44539,6 +44550,18 @@ v6DVT (also check for '- -' bits in the part
> > above) -->
> >    <p class="note">This specification does not define the algorithm to
> >    use when scaling the image, if necessary.</p>
> >
> > +  <p>If the <code
> > +
> >
>  title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
> > +  attribute is set to true, then 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>
> > +
> > +  <p class="note">This specification does not define the precise
> > +  algorithm to use when scaling an image when the <code
> > +
> >
>  title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code>
> > +  attribute is set to true.</p>
> > +
> >    <p class="note">When a canvas is drawn onto itself, the <span>drawing
> >    model</span> requires the source to be copied before the image is
> drawn
> >    back onto the canvas, so it is possible to copy parts of a canvas
> > @@ -46040,6 +46063,36 @@ function AddCloud(data, x, y) { ... }</pre>
> >
> >    </div>
> >
> > +  <h6>Image smoothing</h6>
> > +
> > +  <dl class="domintro">
> > +
> > +   <dt><var title="">context</var> . <code
> >
> title="dom-context-2d-imageSmoothingEnabled">imageSmoothingEnabled</code> [
> > = <var title="">value</var> ]</dt>
> > +
> > +   <dd>
> > +
> > +    <p>Returns whether pattern fills and the <code
> > +    title="dom-context-2d-drawImage">drawImage()</code> method will
> > +    attempt to smooth images if they have to rescale them (as opposed
> > +    to just rendering the images with "big pixels").</p>
> > +
> > +    <p>Can be set, to change whether images are smoothed (true) or not
> > +    (false).</p>
> > +
> > +   </dd>
> > +
> > +  </dl>
> > +
> > +  <div class="impl">
> > +
> > +  <p>The <dfn
> > +
> >
>  title="dom-context-2d-imageSmoothingEnabled"><code>imageSmoothingEnabled</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 true.</p>
> > +
> > +  </div>
> >
> >
> >
> >
> >
> >
> >
>