SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Dec 2002
    0 Post(s)
    0 Thread(s)

    Cool Converting HTML5 canvas coordinate to pixels

    I have a resizeable graph in html 5 canvas created with the flot jQuery resource:

    've read through all the docs in flot and this issue does not seem to be addressed.

    What I want is fairly simple. I have four points in my html5 CANVAS object. I know the point locations according to their CANVAS coordinates: 18 ,55, 75, and 100 respectively in my html5 CANVAS graph.

    I need to , however, resize the canvas, and after I resize the canvas, 18 ticks on the canvas, which used to be 221 px, is now something else in pixels, like 100 px for example.

    so what I need to find is, how to I access a certain coordinate in canvas and then reference that element using css based pixels? In other words, I want to access x: 18, y: 22 in canvas and find out where that pixel is on the larger screen. Does that make sense? I'm sure this is very simple but I don't know the command.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    51 Post(s)
    2 Thread(s)
    It may not be a command, but there's likely a pure-math solution. Esp I would think mapmakers would have a scaling algorithm floating around on the web.

    *edit tho I'm kinda pissed what appears in search engines isn't any math, but loads of junk for teachers to purchase. Commerce, sigh.


Posting Permissions

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