Matter js success!

Ok, this may not seem like much. But I’ve been trying to get this ball to show up on the screen for a day now. I finally did a search past the first page and found this tutorial:

There were 2 parts I had to get going correctly:

  • Setting up the canvas in the html with the canvas tag
  • Including the script in the body tag

Here’s the code that is working for me:





<title>Mathogen - Matter.js</title>



<canvas id="world"></canvas>

<script src=""></script>

<script src="mathogenMatter.js"></script>




window.addEventListener('load', function () {

//Fetch our canvas


//Setup Matter JS



canvas: canvas,

engine: engine,

options: {

width: 500,

height: 500,

background: 'transparent',

wireframes: false,

showAngleIndicator: false



//Add a ball, 250, 50, {

density: 0.04,

friction: 0.01,

frictionAir: 0.00001,

restitution: 0.8,

render: {

fillStyle: '#F35e66',

strokeStyle: 'black',

lineWidth: 1



Matter.World.add(world, ball);

//Add a floor

varfloor=Matter.Bodies.rectangle(250, 520, 500, 40, {

isStatic: true, //An immovable object

render: {

visible: false



Matter.World.add(world, floor);

//Make interactive

varmouseConstraint=Matter.MouseConstraint.create(engine, { //Create Constraint

element: canvas,

constraint: {

render: {

visible: false


stiffness: 0.8



Matter.World.add(world, mouseConstraint);

//Start the engine;;


Leave a Reply

Your email address will not be published. Required fields are marked *