javascript - Fullscreen rectangle in Canvas (Android/iOS web app)

Question

I have a problem trying to render a rectangle over the entire browser viewport using Canvas. The code below works fine on desktop, but on mobile devices (tested on iPad mini, Ne

Answer 1

You can use pixel aspect ratio as a factor when calculating the canvas size.

var ratio = window.devicePixelRatio || 1;
var width = window.innerWidth * ratio;
var height = window.innerHeight * ratio;

canvas.width = width;
canvas.height = height;

CSS:

#canvasID {
    position: fixed;
    left: 0;
    top: 0;
    }

Answer 2

You might try ensuring that your html and body elements are all the full width and height of the viewport. Include any ancestors between the canvas and body as well. See the following CSS code:

html,
body {
  width: 100%;
  height: 100%;
}