WebGL Canvas is blurry with graphics at 1X scale (HiDPI screens)

• Component: WebGL
• Status: RESOLVED DUPLICATE

[Joseph Huckaby]

Created attachment 240811 [details]
Safari vs. Firefox comparison of blurry HiDPI WebGL 2D canvas at 1X

WebGL canvases with 1X pixel graphics are blurry on HiDPI screens.  It appears that the final rendered pixels are blended with each other, despite having my canvas set with "image-rendering:-webkit-optimize-contrast;" (and all the vendor prefix variants of it).  Demo:

http://bowser.effectgames.com/joe/bugs/webgl/webgl-bug-hidpi-blurry.html

The canvas in the demo uses WebGL to display a simple 2D checkerboard pattern (every other pixel is black/white).  This is rendered at 1X size.  Safari is rendering the final pixels halfway blended with their neighbors.

Zoom in using accessibility to see what is actually happening.  I have also attached a screenshot which showcases the problem versus Firefox, where the pixels are crisp and clean.  Zoom in on the screenshot to see the comparison of how Safari renders the WebGL canvas vs. how Firefox does it.

I believe the desired behavior is for the pixels to be crisp and sharp, especially with "image-rendering: -webkit-optimize-contrast;" and friends set.

[Joseph Huckaby]

I tried to select OS X 10.10 in the menu, but it was not listed.

[Joseph Huckaby]

FYI, this bug is now fixed in Chrome Canary 41.  https://code.google.com/p/chromium/issues/detail?id=424025

[Kimmo Kinnunen]

Thanks for the report. Marking this as duplicate of bug 193895 since it appears to target the same use-case.

*** This bug has been marked as a duplicate of bug 193895 ***