Html5 Resize Canvas

[silversurfer5150]

Hi there,

I have just drawn something using canvas to save bandwidth instead of using an image. When I zoomed the text I realized that the canvas won't resize automatically. Can anyone help?

Thanks

ctx = $(this).find("#html5_price");
var element = ctx.get(0);  
 ctx=element.getContext("2d");
 ctx.fillStyle="#2668f9";
ctx.beginPath();
ctx.arc(25,25,25,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

[AussieJohn]

When you say "zoomed the text" are you for example using the Zoom Text Only feature in Firefox (or *gasp* using IE6?)

If so, I don't believe the Canvas could be expected to zoom as it is not text. If you are using the built-in browser zoom (default CTRL+ / CTRL- or CMD+ / CMD-) then the canvas should zoom with the browser AFAIK

A JSFiddle I just put together confirms this for me http://jsfiddle.net/GeekyJohn/hhqzn/embedded/result/

If you are manually resizing the text using styles (with a stylesheet switcher for accessibility for example) you could manually scale the canvas content.

[silversurfer5150]

Hi thanks for your reply John,

I am just using zoom (ctrl++ on windows) to zoom on firefox.
The size of the circle doesn't change.

[AussieJohn]

That's odd. What version of Firefox / Windows are you running? I'm definitely seeing it change over here.

It's probably also worth double checking that in Firefox you don't have "Zoom Text Only" set, hit ALT to bring up the application menu and go to View > Zoom and check "Zoom Text Only" isn't on.

[silversurfer5150]

Hey,
Yes zoom text only was enabled. I don't know what to do in this situation tho, I am trying to support HTML5 so I am using it to draw my circle, instead of with css border radius or with an image but I also need to write text in the circle. Is there a consistent , cross-browser method of doing this, I am finding mixed results?

[AussieJohn]

Well, you *could* use CSS Border Radius like you said, though you'll probably lose the "circle" as the text size goes up at some point.

It's a hard thing to cater for as you can't detect the text size changing.

Incidentally, I think this is one of the reasons why most browsers now use the full page zoom, so that not *just* text gets resized, but everything else as well.