Scaling canvas size - Matter.js

问题

As per attached image, I'm trying to remove the section that extends beyond the lower horizontal wall scribbled in green.

I'm new to matter.js and have issues with the canvas width and height. I've tried several ways but still to no avail.

I don't quite grasp how the engine scales and renders itself. It will also get blurry depends on the width and height I set.

How can I adjust the canvas correctly to fit the world?

I'm using this mixed shapes example from matter.js demo.

    //Fetch our canvas
    var canvas = document.getElementById('world3');
    var width = 200, height = 200; // example width and height


    canvas.width = width;
    canvas.height = height;

    var Engine = Matter.Engine,
            Render = Matter.Render,
            Runner = Matter.Runner,
            Composites = Matter.Composites,
            Common = Matter.Common,
            MouseConstraint = Matter.MouseConstraint,
            Mouse = Matter.Mouse,
            World = Matter.World,
            Bodies = Matter.Bodies;

        // create engine
        var engine = Engine.create(),
            world = engine.world;

        // create renderer
        var render = Render.create({
            canvas:canvas,
            engine: engine,
            options: {
            background: '#fff',
            showAngleIndicator: true,
            wireframes:false,
            },
        });

// truncated below code as is similar to the demo's
---
---

css:

#world3 {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

来源：https://stackoverflow.com/questions/60032960/scaling-canvas-size-matter-js