title: Phaser 3. Change dimensions of the game during runtime
body: <p>Hi please help me to find out how trully responsive game can be created with Phaser3.</p>
  
  <p>Respnsiveness is critical because game (representation layer of Blockly workspace) should be able to be exapanded to larger portion on screen and shrinked back many times during the session.</p>
  
  <p>The question is How I can change dimentions of the game in runtime?</p>
  
  <p>--- edited ---</p>
  
  <p>It turns out there is pure css solution, canvas can be ajusted with css zoom property. In browser works well (no noticeable effect on performance), in cordova app (android) works too.</p>
  
  <p>Here is Richard Davey's answer if css zoom can break things:</p>
  
  <blockquote>
    <p>I've never actually tried it to be honest. Give it a go and see what
    happens! It might break input, or it may carry on working. That (and
    possibly the Scale Manager) are the only things it would break,
    though, nothing else is likely to care much.</p>
  </blockquote>
  
  <pre><code>// is size of html element size that needed to fit 
  let props = { w: 1195, h: 612, elementId: 'myGame' };
  
  // need to know game fixed size
  let gameW = 1000, gameH = 750;
  
  // detect zoom ratio from width or height
  let isScaleWidth = gameW / gameH &gt; props.w / props.h ? true : false;
  
  // find zoom ratio
  let zoom = isScaleWidth ? props.w / gameW : props.h / gameH;
  
  // get DOM element, props.elementId is parent prop from Phaser game config
  let el = document.getElementById(props.elementId);
  
  // set css zoom of canvas element
  el.style.zoom = zoom;
  </code></pre>