- From: Charles Pritchard <chuck@jumis.com>
- Date: Sat, 18 Dec 2010 09:58:37 -0800
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
Received on Saturday, 18 December 2010 09:58:37 UTC