Wie steuere ich, welche Canvas -Schicht zuerst zeichnet (Jcanvas)

Question

In dem folgenden Code habe ich zwei Leinwandschichten einen Text und ein Bild. Das Problem, das ich habe, besteht darin, zuerst zu steuern, welche Ebene zuerst zeichnet. Wenn die Seite geladen wird, kann der Text oben zeichnen oder das Bild blasen, es scheint ziemlich zufällig zu sein. Gibt es eine Möglichkeit, dieses Verhalten zu kontrollieren?

Mein Versuch:

{% 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

Nachdem ich zurückgegangen war und wieder über die Jcanvas Doc's ging, fand ich eine Lösung. Durch die Verwendung von DrawImage () 'ladet "Rückruffunktion kann ich DrawText () aufrufen, nachdem das Bild geladen wurde.

Aktualisierter Code:

 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 %}