[whatwg] Processing the zoom level - MS extensions to window.screen

Sat Dec 18 09:58:37 PST 2010

On 11/24/2010 10:23 AM, Boris Zbarsky wrote:
> On 11/24/10 4:13 AM, Charles Pritchard wrote:
>>>> > And, these aren't great lengths. It's about 6 lines of javascript.
>>> Uh... That depends on how your drawing path is set up. If I understand
>>> correctly what you're doing, you have to get the DPI ration (call it 
>>> N),
>>> change the canvas width/height by a factor of N, and change all
>>> coordinates in all your drawing calls by a factor of N, right?
>>>
>> You're correct, I grab DPI, lets call it xN and yN, I change the canvas
>> width height.
>> Then I run .scale(xN, xY) before my drawing calls. They're completely
>> agnostic
>> to the change.
>
> Ah, I see.  I assumed you were actually trying to draw the fonts at 
> the right size for the viewer, see, as opposed to doing an image 
> upscale of text rendered at a smaller size.
>
> Try this simple testcase:
>
> <body>
> <canvas id="x" width="500" height="500"
>           style="border: 1px solid red"></canvas>
> <script>
>     var c = document.getElementById("x").getContext("2d");
>     c.fillStyle = "green"
>     c.font = "30px sans-serif";
>     c.fillText("aaa", 100, 100);
>     c.font = "10px sans-serif";
>     c.scale(3, 3);
>     c.fillText("aaa", 100, 100);
> </script>
> </body>
>
> Note that the two strings look different in at least Firefox, Chrome 
> and Opera on Mac (in fact in Opera on Mac the upscaled one looks 
> really crappy, but there are differences in the other browsers too)
>
I didn't reply adequately to your example. I should have... Sorry about 
the delayed response.

There are few examples in web documentation about the interaction of
fillStyle = CanvasPattern and the transformation matrix.

I'll work to improve that in the future.

The transformation table, in canvas, has a few uses, one of which is 
managing composition of textures.
Canvas fonts are treated as textures.

I frequently use scale(n,n) and scale(1/n,1/n) styles, as well as 
translate, to set the offsets and ratio of my fillStyle
when it's a pattern or gradient.

Transformations are widely used by feature-rich canvas apps.
font = (fontSize * fontScale) + 'px sans-serif';  is by no means foreign.

While  translate can be used as a short-cut, for while-loops,
its most important purpose is offsetting the fill style when painting on 
textures.

-Charles