Scaling canvas size - Matter.js

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.

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

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%;
}