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
