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;
    }