Matter.js change colors

As @Martti Laine mentioned in a comment, the following code will only work:

Bodies.rectangle(0, 0, 100, 100, {
    render: {
         fillStyle: 'red',
         strokeStyle: 'blue',
         lineWidth: 3
    }
});

if render.options.wireframes is set to false.

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

The properties are body.render.fillStyle, body.render.strokeStyle and body.render.lineWidth.

You can pass these to Body.create(options) or more likely if you're using a factory e.g.

Bodies.rectangle(0, 0, 100, 100, {
    render: {
         fillStyle: 'red',
         strokeStyle: 'blue',
         lineWidth: 3
    }
});

You can also use sprites, see the code

If you need more rendering control, it's best to clone Render.js, customise it and pass it into the engine through Engine.create(element, options) as engine.render.controller.


Since nobody answers the part of question about

I'm tryin to change the background color of the canvas [...]

That part is done like this:

const Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;

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

const render = Render.create({
  element: document.body,
  engine,
  options: {
    width: some_width,
    height: some_height,
    wireframes: false,
    background: 'rgb(255,0,0)' // or '#ff0000' or other valid color string
  }
})