Comment puis-je contrôler quelle couche canevas dessine d'abord (JCanvas)

Question

Dans le code ci-dessous j'ai deux couches de toile un texte et une image, la question que je vais avoir contrôle quelle couche dessine d'abord. Lorsque la page est chargée le texte peut tirer dessus ou souffler l'image, il semble assez aléatoire. Est-il possible que je peux contrôler ce comportement?

Ma tentative:

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

Après avoir remonté et regardant par-dessus la doc jcanvas est encore j'ai trouvé une solution. En utilisant drawImage () 'de la fonction de retour d'appel « charge » Je suis en mesure d'appeler drawText () après que l'image a été chargée.

Code de Mise à jour:

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