2

I noticed that the <canvas> element can have different scales. For instance, if I set the CSS width and height to 100px, but have the javascript set the element's width and height to 200px, the element is sized down so everything printed on it is 1/2 the size. (Or 2x the resolution)

I have a retina screen Macbookpro, so in development, I set the scaling to 2x so the images and objects look clear and crisp on my screen.

I have heard that other screens can have a 1.2x resolution (CSS pixels vs Actual pixels)

Is there a way to find out what the resolution/scaling is of the device's screen so I can make my canvas as crisp and as clean as possible to the user?

If it helps at all, I'm trying to make a game in javascript using canvas as my graphics output.

Steven Rogers
  • 1,874
  • 5
  • 25
  • 48

2 Answers2

2

These properties will give your dimensions:

window.screen.availHeight

window.screen.availWidth

For pixel depth, use this property:

window.devicePixelRatio

For application in canvas, a helpful script and explanation is given here.

Ben Rondeau
  • 2,983
  • 1
  • 15
  • 21
  • So this gives me the dimensions of the available working space within the screen. But does this tell me if I need to double the resolution of the canvas? – Steven Rogers Jan 13 '16 at 23:44
  • Based on this http://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript availHeight will only say how the big the browser window can get, and will subtract out unusable screen space. Which may or may not be desired. – Jason Kennaly Jan 13 '16 at 23:46
  • Maybe I didn't word out my question properly. screen.availHeight and screen.availWidth are not what I am looking for. What I want to know is "Should I make my canvas's width and height twice what it is set in CSS? Or should I leave the resolution 1 to 1?". When working with canvases on a retina screen, they look blurry. I want to know the resolution of the screen so I can make my canvases not look blurry on any screen. – Steven Rogers Jan 13 '16 at 23:48
  • I don't think there's a Javascript command that will provide that information. Thereare types of measurement other than pixels though, and one of them may be what you need. – Jason Kennaly Jan 13 '16 at 23:50
  • 2
    Use `window.devicePixelRatio` to get the pixel depth and then multiply your canvas size by that property. So if the depth is 2, make a 400x600 canvas resolve to 800x1200. That will force 2x pixels in a 400x600 space. – Ben Rondeau Jan 13 '16 at 23:52
0

After searching around using different terms, I was able to find the answer that I was looking for.

The window object has a variable called window.devicePixelRatio. This lets us know the ratio of pixels to the device's screen pixels. On my retina screen, this variable gives me a 2. With this, I can set the canvas to the correct scaling so it looks clean and crisp on any screen.

Source: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Steven Rogers
  • 1,874
  • 5
  • 25
  • 48