Closed Bug 1301551 Opened 3 years ago Closed 3 years ago

disabled interpolation still apply on edges and text

Categories

(Core :: Canvas: 2D, defect, major)

x86
Windows 7
defect
Not set
major

Tracking

()

RESOLVED FIXED
mozilla51
Tracking Status
firefox51 --- fixed

People

(Reporter: seguets, Assigned: ethlin)

Details

(Whiteboard: gfx-noted)

Attachments

(2 files)

We disable interpolation on canvas, in order to keep a sharp pixel art look instead of blur, when calling ctx.drawImage() or ctx.fillText().

While the inside of images keep sharp, any pixel on the edge of the image gets interpolated, blur. Text is interpolated and blur too. This looks really bad in a pixel art game.

Here is a simple example on jsfiddle :
http://jsfiddle.net/DiegoR/a85vvzk4/
I do on purpose use non-rounded values for coordinates, sizes and css, to check that interpolation does not happen.
On the left, the image is still sharp, not blury, so the interpolation disabling works. 
On the right, the same image but with an outline on the edges, and you can see that the outine is blury.
On the bottom, there is no empty space in the image around the tv, so some pixels are on the edges, and you can see that they are interpolated, blur.
This happens with all the images I tested, even if there is only one pixel on the edge of the image, this one only pixel will be blur while the rest of the image will be sharp.

Everything should keep sharp pixel art looking, the nearest neighbour algorithm should be used for everything.
If we want to disable interpolation on a canvas, then we want it disabled for everything, including edges and text, not just the inside of images.

In other browser Chrome, the whole image is sharp, including the edges. Text is interpolated too in Chrome though but I will report this to them.
Whiteboard: gfx-noted
That's because the anti-alias operation. I'll have a patch for the image. For text, I'm not sure if 'imageSmoothingEnabled' should effect text too.
I set AntialiasMode to NONE if imageSmoothingEnabled is false.
Attachment #8789731 - Flags: review?(bas)
Attachment #8789731 - Flags: review?(bas) → review+
try result looks good:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=77938dd98f1a
Status: UNCONFIRMED → NEW
Ever confirmed: true
Assignee: nobody → ethlin
Keywords: checkin-needed
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/464a1a130777
Don't do anti-alias if 'imageSmoothingEnabled' is false. r=bas
Keywords: checkin-needed
Comment on attachment 8789731 [details] [diff] [review]
remove anti-alias if imageSmoothingEnabled is false

Review of attachment 8789731 [details] [diff] [review]:
-----------------------------------------------------------------

::: dom/canvas/CanvasRenderingContext2D.cpp
@@ +4885,5 @@
>  
>      if (!res.mSourceSurface) {
>        res = nsLayoutUtils::SurfaceFromElement(element, sfeFlags, mTarget);
> +      if (res.mSourceSurface) {
> +        gfxUtils::WriteAsPNG(res.mSourceSurface, "/Volumes/firefoxos/Dev/mozilla-git/temp.png");

:ethlin, can you tell me why it is necessary?
Flags: needinfo?(ethlin)
(In reply to Sotaro Ikeda [:sotaro] from comment #5)
> Comment on attachment 8789731 [details] [diff] [review]
> remove anti-alias if imageSmoothingEnabled is false
> 
> Review of attachment 8789731 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: dom/canvas/CanvasRenderingContext2D.cpp
> @@ +4885,5 @@
> >  
> >      if (!res.mSourceSurface) {
> >        res = nsLayoutUtils::SurfaceFromElement(element, sfeFlags, mTarget);
> > +      if (res.mSourceSurface) {
> > +        gfxUtils::WriteAsPNG(res.mSourceSurface, "/Volumes/firefoxos/Dev/mozilla-git/temp.png");
> 
> :ethlin, can you tell me why it is necessary?

oh, sorry, I didn't notice this. I should remove the debug code.
Flags: needinfo?(ethlin)
Remove the debug code.
Attachment #8791893 - Flags: review?(sotaro.ikeda.g)
Attachment #8791893 - Flags: review?(sotaro.ikeda.g) → review+
Pushed by nsilva@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8b08565f9815
Remove unnecessary debug lines. r=nical
https://hg.mozilla.org/mozilla-central/rev/464a1a130777
Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla51
Still happening here. There is still unwanted anti-aliasing on edges of images and text, though ctx.imageSmoothingEnabled = false; . 
http://jsfiddle.net/DiegoR/a85vvzk4/
You need to log in before you can comment on or make changes to this bug.