Make canvas responsive and fill remaining space


What I need is to have header/aside/footer layout with fixed proportions and then babylon canvas, which resizes to fill remaining space when window size changes. I created this JSFiddle.

I know this is more CSS question, but it might help others I believe. I searched various forums and spent literally hours trying to figure this out on my own. I’m sure it takes a few seconds for masters present! :slight_smile:

Have tried your JSFiddle twice (on Firefox) and on both occasions my laptop has become extremely unresponsive :slightly_frowning_face: Please check.


I had similar problem once. And now I’m handling resizing like this:

    // Resizing
    function resizeCanvas (canvas: HTMLCanvasElement) {
      canvas.width = window.innerWidth;
      // canvas.width = window.innerWidth - myDrawerWidth;
      canvas.height = window.innerHeight;
      // canvas.height = window.innerHeight - (myHeaderHeight + myFooterHeight);

    window.addEventListener('resize', () => {

And I’m using window.innerWidth - myDrawerWidth and window.innerHeight - (myHeaderHeight + myFooterHeight). It worked just fine for now…


This is exactly what I was looking for! Thank you!

I edited the JSFiddle as you proposed and implemented debouncing, this should also solve @JohnK performance issues. (although I didn’t encountered any [also on Firefox])