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

[Rik Cabanier]

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.