Search the Community
Showing results for tags 'css resize device orientation'.
Found 1 result
-
Hello everyone, I'm trying to make a resizable canvas following this guides I found in this forum https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html. I'm sure this topic has been discussed plenty of times and I have spent some time searching for some info I could use but with no luck (most of the replies make use of window.innerWidth/innerHeight). The thing is that It seems ok when displayed on a desktop or a mobile device in portrait mode, but when I change to landscape and reload the page nothing is shown on the canvas. As far as I know when it rotates, width becomes greater than height and coordinate system does not change at all, so I don't know what I'm missing (something related to mobile resolutions and ppi maybe?) I'm fairly new to html/css/js and I'm certain that the issue is related to my poor knowledge with some concepts. Here is the code anyway, any help or directions would be very much appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/> <title>My PIXI App</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.6/pixi.min.js"></script> </script> </head> <body> </body> </html> * { padding: 0; margin: 0; } html { width: 100%; height: 100%; } body { background-color: lightslategrey; } canvas { display: block; position: absolute; width: 100%; height: 100%; } const width = 512; const height = 512; const appOptions = { width: width, height: height, resolution: window.devicePixelRatio, roundPixels: true, transparent: false, backgroundColor: 0x555555, }; const app = new PIXI.Application(appOptions); document.body.appendChild(app.view); coolResize(); app.ticker.add(coolResize); drawSquare(); drawSquare(app.view.width / 2 - 25, app.view.height / 2 - 25); function coolResize() { const multiplier = app.renderer.options.resolution || 1; const clientWidth = Math.floor(app.view.clientWidth * multiplier); const clientHeight = Math.floor(app.view.clientHeight * multiplier); if (app.view.width !== clientWidth || app.view.height !== clientHeight) { app.view.width = clientWidth; app.view.height = clientHeight; return true; } return false; } function drawSquare(x = 0, y = 0) { const graphics = new PIXI.Graphics(); graphics.lineStyle(2, 0xFF00FF, 1); graphics.beginFill(0xFF00BB, 0.25); graphics.drawRoundedRect(x, y, 50, 50, 10); graphics.endFill(); app.stage.addChild(graphics); } I've created a fiddle just in case it could be of any help: https://jsfiddle.net/pmyzLk35/ Thank you so much and I'm sorry for wasting your time. PS. Btw I don't know why should I resize first and then add the resize function to the ticker, shouldn't adding to the app.ticker be enough? I tried it but does not lead to the same result. I'll take a look to the docs later I guess.
