Matter.js change colors

javascript jquery html canvas frontend
user1399844 picture user1399844 · Mar 27, 2014 · Viewed 8.4k times · Source

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

Answer

liabru picture liabru · May 8, 2014

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.

Related questions

Get pixel color from canvas, on mousemove

Is it possible to get the RGB value pixel under the mouse? Is there a complete example of this? Here's what I have so far: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.…

Read More
Real time data graphing on a line chart with html5

I want to make a line chart that updates every couple of seconds and doesn't need the page to be refreshed(it would get the info from a separate file that updates on a server), is their any JavaScript libs(…

Read More
jQuery equivalent of getting the context of a Canvas

I have the following working code: ctx = document.getElementById("canvas").getContext('2d'); Is there any way to re-write it to use $? Doing this fails: ctx = $("#canvas").getContext('2d');

Read More