Javascript Matter.js-这是在一个页面中呈现多个引擎和画布的正确方法吗？

我正在尝试做图像显示的事情，在一个页面中有不同的画布。它们每个都有不同的属性和选项。到目前为止，它是有效的，但是

这样做合适吗

在实时服务器上加载会很慢吗？我正在本地主机atm上进行试验

//-----第一张画布------

addEventListener（'load'，function（））{
//把我们的画布拿来
var canvas=document.getElementById（'world'）；
//模块别名
var发动机=物质发动机，
Render=物质，Render，
世界=物质。世界，
物体=物质。物体；
//创建引擎
var engine=engine.create（）；
//创建渲染器
var render=render.create({
画布：画布，
引擎:引擎,，
选项：{
宽度：500，
身高：500，
背景：“#000”，
线框：假，
showAngleIndicator:错误
});
//创建两个盒子和一个地面
var boxA=实体。矩形（400、200、80、80）；
var boxB=实体。矩形（450,50,80,80）；
var ground=Bodies.矩形（400610810,60，{isStatic:true}）；
//将所有实体添加到世界
添加（engine.World，[boxA，boxB，ground]）；
//发动引擎
引擎。运行（引擎）；
//运行渲染器
Render.run（Render）；
});

//-----第二张画布------

addEventListener（'load'，function（））{
//把我们的画布拿来
var canvas=document.getElementById（'world2'）；
//模块别名
var发动机=物质发动机，
Render=物质，Render，
世界=物质。世界，
物体=物质。物体；
//创建引擎
var engine=engine.create（）；
//创建渲染器
var render=render.create({
画布：画布，
引擎:引擎,，
选项：{
宽度：500，
身高：500，
背景：“#000”，
线框：假，
showAngleIndicator:错误
});
//创建两个盒子和一个地面
var boxA=实体。矩形（400、200、80、80）；
var boxB=实体。矩形（450,50,80,80）；
var ground=Bodies.矩形（400610810,60，{isStatic:true}）；
//将所有实体添加到世界
添加（engine.World，[boxA，boxB，ground]）；
//发动引擎
引擎。运行（引擎）；
//运行渲染器
Render.run（Render）；
});

<script>
window.addEventListener('load', function() {

//Fetch our canvas
    var canvas = document.getElementById('world');
// module aliases
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: canvas,
        engine: engine,
        options: {
            width: 500,
            height: 500,
            background: '#000',
            wireframes: false,
            showAngleIndicator: false
});

// 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 });

// 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>


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

<script>
window.addEventListener('load', function() {

//Fetch our canvas
    var canvas = document.getElementById('world2');
// module aliases
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: canvas,
        engine: engine,
        options: {
            width: 500,
            height: 500,
            background: '#000',
            wireframes: false,
            showAngleIndicator: false
});

// 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 });

// 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>


<canvas id="world2"></canvas>