SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Html5 Resize Canvas

    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

    Code:
    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();
    "Persistence is the path to perfection"

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    "Persistence is the path to perfection"

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    "Persistence is the path to perfection"

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •