缩放画布大小-Matter.js

Question

根据附加的图片，我正在尝试删除延伸到下方的绿色水平划线下方的部分。

我刚开始接触Matt.js，并且画布的宽度和高度有问题。我尝试了几种方法，但仍然无济于事。

我不太了解引擎是如何缩放和渲染的。根据我设置的宽度和高度，它也会变得模糊。

如何正确调整画布以适应世界？

我正在使用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%;
}