どのキャンバスレイヤーが最初に描画するかを制御するにはどうすればよいですか（jcanvas）

Question

以下のコードには、2つのCanvasレイヤー1つのテキストと1つの画像があります。私が抱えている問題は、最初にどのレイヤーを描画するかを制御することです。ページが読み込まれると、テキストが画像の上に描画したり、画像を吹き飛ばす場合がありますが、かなりランダムに見えます。この動作を制御できる方法はありますか？

私の試み：

{% extends "layout.html" %}
{% block body %}
<script>
    window.onload = function(){
            $("canvas").addLayer({
                method: "drawImage",
                source: '{{ url_for('static', filename='100MV-Floor-Plan.png') }}',
                x: 700, y: 300,
            })

            $("canvas").addLayer({
                    method: "drawText",
                    strokeStyle: "C35817",
                    x:{{ room.xPos }}, y: {{ room.yPos }},
                    text: '{{ room.room_id }}',
                    align: "center",
                    baseline: "middle"
            })

            $("canvas").getLayer(0);
            $("canvas").getLayer(1);
            $("canvas").drawLayers();
        }; 
</script>
<canvas width="1397" height="711"></canvas>
<h1>{{ room.current_user }}</h1> 
<form method=POST>
    Room ID: <input type="text" name="room_id"/><br />
    <input type="submit" value="Click" class="button">
</form>
{% endblock %}

Answer 1

戻ってJcanvasのドキュメントをもう一度見た後、解決策を見つけました。 drawimage（）の「ロード」コールバック関数を使用することにより、画像が読み込まれた後にdrawText（）を呼び出すことができます。

更新されたコード：

 1 {% extends "layout.html" %}
 2 {% block body %}
 3     <script>
 4         window.onload = function(){
 5                 $("canvas").drawImage({
 6                     source: '{{ url_for('static', filename='100MV-Floor-Plan.png') }}',
 7                     x: 700, y: 300,
 8                     load: displayText
 9                 })
10
11                 function displayText() {
12                     $("canvas").drawText({
13                         strokeStyle: "C35817",
14                         x:{{ room.xPos }}, y: {{ room.yPos }},
15                         text: '{{ room.room_id }}',
16                         align: "center",
17                         baseline: "middle"
18                         });
19                 };
20             };
21     </script>
22     <canvas width="1397" height="711"></canvas>
23     <h1>{{ room.current_user }}</h1>
24     <form method=POST>
25         Room ID: <input type="text" name="room_id"/><br />
26         <input type="submit" value="Click" class="button">
27     </form>
28 {% endblock %}