SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JS & Canvas - Draw Image to scale

    Hello:

    I am working with JQuery, and drawing images using Canvas (drawImage, translate, rotate) I am trying to draw an image and maintain its scale or aspect ratio so the image does not become distorted.

    I have been working on a problem for many days now, I am writing a smartphone app and am having a problem displaying an image to scale, but also using the most area of the screen as possible.

    For example:
    -If the image is taller than it is wide and the phone is in portrait "tall" mode, then the image only has to be scaled, not rotated.

    -If the image is taller than it is wide and the phone is in landscape "wide" mode, the image must be rotated and then scaled in order to maximize the displayed size

    -If the image is wider than it is tall and the phone is in portrait mode, then the image has to be rotated and scaled.

    -If the image is wider than it is tall and the phone is in landscape mode, then the image has to be only scaled, not rotated.

    Seems simple enough, but I can't get it to work out at all. Does anyone have an example code which would do this?

    Thank you.

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can you post you're code? I'm a little rusty with Canvas, but if I see your code I'll be able to fix it.


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
  •