Render a red square on Matter.js
Multi tool use
Render a red square on Matter.js
I am having trouble displaying a red square on the Matter.js physics engine. I sure that I referenced the necessary variables, but I can't seem to display anything else other than the minimal example of Matter.js. What did I do wrong?
<html>
<script src='matter.min.js'>
</script>
<canvas>
</canvas>
<script>
var banvas = document.querySelector('canvas'),
context = banvas.getContext('2d');
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
canvas: banvas,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
context.fillStyle='red';
context.fillRect(0,0,40,40);
// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
</script>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
