Matter.js：将文本或图像放置在画布上的对象后面

我想将字体或静态图像放置到画布上，但不确定使用 Matter.js 的最佳方法是什么。现在，对于图像，我只是创建一个大小为“0”的主体，并将图像 url 放入 render.sprite.texture 属性中。似乎可以解决问题，但是是否有不同/更好的方法将静态图像放在画布上？

另外，在创建/绘制其他内容之前，我使用脚本顶部附近的“afterRender”事件将文本放置到画布上：

_sceneEvents.push(
    Events.on(_engine, 'afterRender', function(event) {
        var context = _engine.render.context;
        context.font = "45px 'Cabin Sketch'";
        context.fillText("THROW OBJECT HERE", 150, 80);
    });
);

唯一的问题是文本不断地绘制在顶部，因此我的可拖动对象不断地位于文本后面。我只是希望文本保留在背景中，就像静态图像一样，但我认为将字体绘制到画布上可能比让用户下载另一个图像更好。有什么帮助吗？

Matter.js 中包含的渲染器实际上仅用于演示，因此最好的办法是复制示例渲染.js https://github.com/liabru/matter-js/blob/master/src/render/Render.js然后在那里实现所有渲染（其中Render.world是每个价格变动时调用的入场方法）。

将对象名称更改为其他名称，例如CustomRenderer，然后将渲染类传递给Engine.create选项：

var engine = Engine.create({
    render: {
        element: element,
        controller: CustomRenderer
    }
});