bowlofrice Posted January 9, 2019 Share Posted January 9, 2019 Hi, I am working on adding features to the tutorial game for phaser 2. I am currently running into an issue where the scaling for the canvas isn't working. When the browser isn't in full screen mode, the canvas stretches correctly until you reach a certain point then it does this: https://imgur.com/a/Q5xX9RZ Also when you go into full screen mode the background breaks and sizing isn't correct. Looking at the console this is what it says about the console: <canvas width="2332" height="1288" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit; width: 885px; height: 489px; margin-left: 0px; margin-top: 150px; margin-bottom: -150px;"></canvas> I believe this second width width: 885px; height: 489px is the issue, but I have researched into this, and can't figure out a way to change this. var canvas_width = window.innerWidth * window.devicePixelRatio; var canvas_height = window.innerHeight * window.devicePixelRatio; var game = new Phaser.Game( canvas_width , canvas_height, Phaser.AUTO, 'game', { preload: preload, create: create, update: update }) * { margin: 0; padding: 0; } html body { width: 100%; height: 100%; background-color:#6ac1f7; margin: 0; } #game{ width: 800px; } canvas { padding: 0; margin: 0 auto; width: 100%; height: 100%; } The rest of the code is here: https://embed.plnkr.co/gTKkhHfCgqoxI1BCQnnj/ I would appreciate any help, thanks a lot! Link to comment Share on other sites More sharing options...
bowlofrice Posted January 10, 2019 Author Share Posted January 10, 2019 resolved this issue myself Link to comment Share on other sites More sharing options...
Recommended Posts