Resizing default canvas in matterjs file

Question

I am trying to override the default canvas size that is set to: 800x600

After some digging in the documentation, I found:

 Matter.Render.create([options]) 

And the options we are interested in are: render.options.height and render.options.width .

How to use them correctly?

What I tried:

 (function(){ //this is the correct reference var canvas = document.getElementById('canvas'); var renderer = Matter.Render.create({ canvas: canvas, height: 1000, width: 1000 }); })() 

Warning: I get:

[Matter] warns: "Transmitted" render.element "," render.canvas "was not inserted into the document.

What does the docs match:

render.element HTMLElement

Link to the element where the canvas is (if render.canvas is not specified)

Answer 1

Unfortunately, Matter.js does not have good documentation (although, believe me, this is a great engine). You should call Engine.create object that has a render property that has element and canvas properties. If you do not pass the canvas to this function, a new canvas element will be created and added to this element. Although in my test cases, it seems that I still need the element as a render property. This is strange, I know, but worse ...

Now, if you want to set the canvas size, you go through the main object and follow this path - render.options.width and render.options.height , so it render.options.height something like this:

 { render: { options: { height: 1000, width: 1000 } } } 

But the problem is that when you pass your own canvas element, Matter decides that the height and width of the canvas should be the ones that are set for that element, and not the ones that the intelligent programmer passes in the options. I registered this problem in the Matter.js GitHub repository and provided a PR solution, but this may not be combined in the near future. Therefore, I cannot offer you the ideal solution to override this in the settings, but a simple way to get around this would be to set canvas.width and canvas.height right before you start Engine.

 canvas.width = 1000; canvas.height = 1000; 

There is also an internal resizing method, but no better than the option above. Therefore, if you really redefine the parameters (perhaps you are developing on top of the engine), I suggest you leave the canvas creation in Matter.JS, just leaving render.canvas undefined .

Here is a complete solution using canvas.width and canvas.height note that the warning mentioned above is no longer saved, and Matter.js uses this canvas element and adds it to this rendering element.

  // Matter.js module aliases var Engine = Matter.Engine, World = Matter.World, Body = Matter.Body, Bodies = Matter.Bodies, Composites = Matter.Composites, Composite = Matter.Composite, Constraint = Matter.Constraint, engine; (function() { var canvas = document.getElementById('canvas'); var width = 1000, height = 1000; canvas.width = width; canvas.height = height; engine = Engine.create({ render: { element: document.body, canvas: canvas, options: { width: 1000, height: 1000 } } }); // run the engine Engine.run(engine); })(); 

 <script src="http://brm.io/js/libs/matter-js/matter-0.7.0.min.js"></script> <canvas id="canvas"></canvas> 

Edit:

If you need a canvas to fill the entire page , use:

 canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener("resize", function(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); 

 // Matter.js module aliases var Engine = Matter.Engine, World = Matter.World, Body = Matter.Body, Bodies = Matter.Bodies, Composites = Matter.Composites, Composite = Matter.Composite, Constraint = Matter.Constraint, engine; (function() { var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; engine = Engine.create({ render: { canvas: canvas } }); window.addEventListener("resize", function(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // run the engine Engine.run(engine); })(); 

 body { margin: 0; overflow: hidden; } 

 <script src="http://brm.io/js/libs/matter-js/matter-0.7.0.min.js"></script> <canvas id="canvas"></canvas> 

Edit 2: The tensile request has been merged and will be available in the next edge construction.

https://github.com/liabru/matter-js/issues/168