Matter-js: How to change where canvas will be rendered in DOM?

Created on 2 Dec 2016 · 5Comments · Source: liabru/matter-js

I am using the default Render.js and cannot figure out how to create my own canvas and have the game take place in there. I just want to center the canvas in the DOM and stylize around it. Thanks.

question

Source

KennethCooney

Most helpful comment

Thank you @kroko ! It was a stupid mistake. I had

Its working now!

KennethCooney on 5 Dec 2016

🎉1 👍1

All 5 comments

Render.create({
  canvas: document.querySelector('.canvas-physics')
});

source: http://brm.io/matter-js/docs/classes/Render.html#properties

kroko on 3 Dec 2016

👍2

What @kroko shows should work (thanks). Also take a look at the Rendering wiki page.

liabru on 4 Dec 2016

Thank you kroko and liabru. I tried what you suggested, but I am still getting an error:

matter.js:7536 Uncaught TypeError: render.canvas.getContext is not a function
at Object.Render.create

This is what I have:

// create a renderer
var render = Render.create({
element: document.body,
canvas: document.querySelector('#myCanvas'),
engine: engine,
options: {
background:"#2b2b2b",
width: 600,
height: 960,
wireframes: false,
showPositions: false,
showAxes: false,
hasBounds: false,
showDebug: false
}
});