Search code examples
javascripthtml5-canvasmatter.js

Matter.js change colors

I'm working with matter.js on a small project.

I'm tryin to change the background color of the canvas and add custom colors to objects.

Does anyone know a tutorial or something for styling matter.js

Matter.js

Solution

  • 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.