How to Make Matter.js Fill the Browser Window

This guide explains how to configure a Matter.js simulation to dynamically fill the entire browser window. By adjusting the CSS to remove default page spacing, setting the Matter.js Render module dimensions to the viewport's width and height, and listening for browser resize events, you can create a seamless, full-screen physics canvas that adapts to any screen size.

1. Reset Page CSS

Browsers apply default margins and paddings to the <body> element, which can create scrollbars when a canvas matches the viewport dimensions. Reset these properties and hide the overflow in your CSS:

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

canvas {
  display: block;
}

2. Configure the Renderer Dimensions

When initializing the Render module via Render.create(), set the width and height properties in the options object to window.innerWidth and window.innerHeight.

const { Engine, Render, Runner, Bodies, Composite } = Matter;

const engine = Engine.create();

const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: window.innerWidth,
    height: window.innerHeight,
    wireframes: false
  }
});

Render.run(render);
Runner.run(Runner.create(), engine);

3. Handle Dynamic Window Resizing

To prevent the canvas from clipping or leaving empty space when the user resizes the browser, add an event listener for the resize event. Inside the listener, update the canvas dimensions, the renderer's internal bounds, and any static boundaries (like screen borders or floors).

window.addEventListener('resize', () => {
  // Update canvas width and height
  render.canvas.width = window.innerWidth;
  render.canvas.height = window.innerHeight;

  // Update render options dimensions
  render.options.width = window.innerWidth;
  render.options.height = window.innerHeight;

  // Update render bounds
  Matter.Render.setPixelRatio(render, window.devicePixelRatio);
});

Complete Implementation Example

const { Engine, Render, Runner, Bodies, Composite } = Matter;

// Create engine
const engine = Engine.create();

// Create full-screen renderer
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: window.innerWidth,
    height: window.innerHeight,
    wireframes: false
  }
});

Render.run(render);
Runner.run(Runner.create(), engine);

// Add a boundary at the bottom of the screen
let ground = Bodies.rectangle(
  window.innerWidth / 2,
  window.innerHeight,
  window.innerWidth,
  60,
  { isStatic: true }
);

Composite.add(engine.world, [ground]);

// Keep canvas and ground sized to window
window.addEventListener('resize', () => {
  render.canvas.width = window.innerWidth;
  render.canvas.height = window.innerHeight;
  render.options.width = window.innerWidth;
  render.options.height = window.innerHeight;

  // Reposition ground to match new window dimensions
  Matter.Body.setPosition(ground, {
    x: window.innerWidth / 2,
    y: window.innerHeight
  });
});