[whatwg] Blurry lines in 2D Canvas (and SVG)

Rik Cabanier cabanier at gmail.com
Thu Jul 25 13:49:28 PDT 2013

On Thu, Jul 25, 2013 at 1:28 PM, Glenn Maynard <glenn at zewt.org> wrote:

> On Thu, Jul 25, 2013 at 2:36 PM, Rik Cabanier <cabanier at gmail.com> wrote:
>> On Thu, Jul 25, 2013 at 7:05 AM, Glenn Maynard <glenn at zewt.org> wrote:
>>> On Thu, Jul 25, 2013 at 12:24 AM, Rik Cabanier <cabanier at gmail.com>wrote:
>>> Yes, that's what I had in mind: the developer detects the device pixel
>>>> ratio and scales up the canvas so the pixels match.
>>> That reduces to the simple case, then.  The pixel ratio gets out of the
>>> picture entirely if you adjust the canvas so it's rendered 1:1 to pixels,
>>> so the rules for getting hard edges are the same (half-pixels for strokes,
>>> integer pixels for fills).
>> Unfortunately, no.
>> Let's say you have a device pixel ratio of 1.1 and a canvas of 100x100px.
>> The underlying canvas bitmap should now be created as 110 x 110 pixels
>> and your content should be scaled by 1.1. This will make everything blurry
>> :-(
> If you have a pixel ratio of 1.1 (100 CSS pixels = 110 device pixels), and
> you're displaying in a 100x100 box in CSS pixels, then you create a canvas
> of 110x110 pixels, so the backing store has the same resolution as the
> final device pixels.

You still need the scale though, otherwise the canvas content isn't zoomed
(which is what the user requested)

> If you don't do that--if you create a 100x100 backing store and then
> display it in 100x100 CSS pixels--then nothing Canvas can do will prevent
> it from being blurry, because the backing store is being upscaled by 10%
> after it's already been drawn.

Correct. Any scaling to the Canvas bitmap is not something that you can
control when you draw the pixels.

More information about the whatwg mailing list