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

[Glenn Maynard]

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.

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.

-- 
Glenn Maynard