matterJS渲染到画布

Question

我试图使用matterJS并将其渲染到布局中的特定画布，但我无法管理它。

这将在JS：

window.addEventListener("load",init); 
    function init(){ 

    var canvas = document.getElementById('matterJS'); 
    var width = 100, 
     height = 100; 

    canvas.width = width; 
    canvas.height = height; 
     // Matter.js - http://brm.io/matter-js/ 

     // Matter module aliases 
     var Engine = Matter.Engine, 
      World = Matter.World, 
      Body = Matter.Body, 
      Composites = Matter.Composites, 
      MouseConstraint = Matter.MouseConstraint; 

     // create a Matter.js engine 
     var engine = Engine.create({ 
      render: { 
      element: document.body, 
      canvas: canvas, 
      options: { 
       width: 100, 
       height: 100,     
       showAngleIndicator: true, 
       showVelocity: true, 
       wireframes: false 
      } 
      } 
     }); 

     // add a mouse controlled constraint 
     var mouseConstraint = MouseConstraint.create(engine); 
     World.add(engine.world, mouseConstraint); 

     // add a Newton's Cradle (using the Composites factory method!) 
     var cradle = Composites.newtonsCradle(280, 150, 5, 30, 200); 
     World.add(engine.world, cradle); 

     // offset the first body in the cradle so it will swing 
     Body.translate(cradle.bodies[0], { x: -180, y: -100 }); 

     // run the engine 
     Engine.run(engine); 
    } 

在我的html即时通讯做的：

<canvas class="matterJS"></canvas> 

我没有得到任何错误，但没有呈现任何..我认为这应该工作。但为什么不呢？

我只能渲染时，即时通讯创建引擎这样的结局：

var engine = Engine.create(document.getElementById('matterJS'),{ 
       options: { 
        width: 100, 
        height: 100,     
        showAngleIndicator: true, 
        showVelocity: true, 
        wireframes: false 
       } 
      }); 

Answer 1

现在解决这样的：

var canvas = document.getElementById('matterJS'); 
var width = 800, 
    height = 800; 

canvas.width = width; 
canvas.height = height; 
    // Matter.js - http://brm.io/matter-js/ 

    // Matter module aliases 
    var Engine = Matter.Engine, 
     World = Matter.World, 
     Body = Matter.Body, 
     Composites = Matter.Composites, 
     MouseConstraint = Matter.MouseConstraint; 

    // create a Matter.js engine 
    var engine = Engine.create(canvas, { 
     options: { 
      width: 1000, 
      height: 1000,     
      showAngleIndicator: true, 
      showVelocity: true, 
      wireframes: false 
     } 
    });