I'm setting up a htm5 canvas as a background graphic that covers the whole screen. Currently the Canvas graphic refreshes every time the window changes size, so the graphic can bounce around the edges of the window even if the user changes the window dimensions. This works great for desktop, but not great for mobile/tablet because the browser navigation bar on mobile/tablet causes the canvas to resize every time the browser navigation bar hides and appears. I am trying to find a way to make the 'window.addEventListener' only run on desktop and be ignored on mobile/tablet.
window.addEventListener("resize", sizeCanvas);
sizeCanvas();
function sizeCanvas(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 55;
if(exampleRunning){
reset();
}
}
var reset = function(){
stars = [];
FPS = 60;
if (canvas.width < 600) x = 16;
if (canvas.width > 600) x = 22;
if (canvas.width > 1200) x = 34;
for (var i = 0; i < x; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 4 + 1,
vx: Math.floor(Math.random() * 50) - 25,
vy: Math.floor(Math.random() * 50) - 25,
});
}
}