0

I'm developing my HTML5 game to match the device's screen, as a native mobile app would, I have a viewport meta that declared width to device-width and prevents zooming, as such:

<meta name = 'viewport' content = 'width = device-width, user-scalable = 0'/>

And a script that resizes the canvas to match the window:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

The problem I encountered was that the graphics were noticeably blurry when I tested the game on my 1080p smartphone; and it turned out that my canvas' size (in portrait mode) was 424×829. I then removed device-width, and my webpage rendered 980×1915 in portrait, which is a bit off, and then 980×371 in landscape, which is only a tad better than device-width. How do I have it match the screen's pixel density? Thank you. Update: To be clear, I'm not having trouble fitting the canvas into the window, I'm having trouble having the window match the screen's resolution (e.g. be 1080 pixels wide on a 1080 pixel wide screen, rather than 980 or 424).

K. Russell Smith
  • 133
  • 1
  • 11
  • I doubt the blurry canvas has nothing to do with the width of the canvas. See [this post](https://stackoverflow.com/questions/10373695/drawing-lines-in-canvas-but-the-last-ones-are-faded), and [about blurry images](https://stackoverflow.com/questions/47560855/javascript-loaded-image-is-blurry-png), as well as [CSS width](https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5/4939066#4939066). – Teemu Jun 07 '19 at 04:32
  • 1
    The question has nothing to do with Android flag please change it! Also you may want to setup you website's design to fit to any mobile (or other devices) using css features like `vw` `vh` `@media screen and (...)` etc – Saswata Jun 07 '19 at 05:02

1 Answers1

0

I think the answer to your question is: just set your canvas width to 100vw and height to 100vh.

virgiliogm
  • 946
  • 7
  • 15