Nothing showing in the matter.js canvas

Question

Nothing showing in the matter.js canvas

wscott20 opened this issue 7 months ago · comments

When i try to render a box and ground nothing shows, there arent any errors in the console, and when i console.log the canvas it selects correctly.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--i put it in the parent (documents) directory so i can use matter.js in other projects-->
        <script src="../matter.js" defer></script>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
        <script src="main.js"></script>
    </body>
</html>
canvas {
    border: 1px solid grey;
    margin: auto;
    display: block;
    background-color: black;
}
body {
    background-color: black;
}
document.addEventListener('DOMContentLoaded',()=>{ // tried using the dom content loaded event listener and tried including the script in the head tag and tried using defer but still won't show anything
let canvas = document.getElementById('canvas')
let engine = Matter.Engine.create()
let render = Matter.Render.create({
    element: canvas,
    engine: engine,
    options: {
        width: 600,
        height: 600,
        wireframes: false
    }
})
let testBox = Matter.Bodies.rectangle(300,100,100,100,{render:{fillStyle:'grey'}})
let ground = Matter.Bodies.rectangle(300,500,600,100,{render:{fillStyle:'grey'}})
Matter.Composite.add(engine.world, [testBox,ground])
let runner = Matter.Runner.create()
Matter.Runner.run(runner,engine)
Matter.Render.run(render)
})

ggorlen · Answer 1 · Tue Nov 14 2023 13:05:07 GMT+0800 (China Standard Time)

Try using the canvas: key on your Render initializer options object rather than element:. If you use element:, Matter.js treats it as a container (say, a <div>) and assumes it should create and append a canvas inside the element. On the other hand, specifying canvas: causes Matter.js to treat the element as a canvas rather than a container.

This behavior could probably be improved in terms of in-app errors. If a <canvas> is provided where a container is expected, it seems reasonable to expect MJS to throw a clear error.

Here's an example you can build from. I made the ground static so it won't fall, formatted the code, replaced let with const, etc, but most of these are cosmetic changes. The minimal way to make your code work is to use canvas: canvas rather than element: canvas.

In modern JS, {canvas: canvas} can be simplified to {canvas}.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<style>
canvas {
  border: 1px solid grey;
  margin: auto;
  display: block;
  background-color: black;
}
body {
  background-color: black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById("canvas");
const engine = Matter.Engine.create();
const render = Matter.Render.create({
  canvas,
  engine,
  options: {
    width: 600,
    height: 600,
    wireframes: false,
  },
});
const testBox = Matter.Bodies.rectangle(300, 100, 100, 100, {
  render: {fillStyle: "grey"},
});
const ground = Matter.Bodies.rectangle(300, 500, 600, 100, {
  isStatic: true,
  render: {fillStyle: "grey"},
});
Matter.Composite.add(engine.world, [testBox, ground]);
const runner = Matter.Runner.create();
Matter.Runner.run(runner, engine);
Matter.Render.run(render);
</script>
</body>
</html>

Please close the issue if this resolves your question, since MJS maintenance has been low recently from liabru, so there's no other way to close an issue without him around. Thanks!