Canvas Javascript Ordem Elementos

[SpykerGM 0]

De vez em quando a ordem das imagens muda após dar refresh na pagina apesar de o codigo em si não mudar.

(Só comecei a ver o Canvas desde ontem, por necessidade).

<canvas id="myCanvas" width="391" height="400"></canvas>
<script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");

            var imagens = [];
            var imgPrincipal = new Image();
            imgPrincipal.src = "../Imagens/tshirt-front.png";
            imgPrincipal.onload = function() {
                 context.drawImage(imgPrincipal, 0, 0, 391,400);
            };
          
            imagens[1] = new Image();
            imagens[1].onload = function() {
               var pattern = context.createPattern(imagens[1], "repeat");
               context.rect(110, 80, 170.0019,137.9518);
               context.fillStyle = pattern;
               context.fill();
               context.lineWidth = 2;
               context.strokeStyle = "black";
               context.stroke();
             };

             imagens[1].src = "Imagens/imagem_icon.png";
             imagens[2] = new Image();           
             imagens[2].onload = function() {
                var pattern = context.createPattern(imagens[2], "repeat");
                context.rect(10, 90, 170.0019,137.9518);
                context.fillStyle = pattern;
                context.fill();
                context.lineWidth = 2;
                context.strokeStyle = "black";
                context.stroke();
                context.font = "43pt ";
                context.fillText("SEM TEXTO", 10, 90);
             };

             imagens[2].src = "Imagens/imagem_icon.png";
</script>

PRINTS:

http://prntscr.com/80t7rm

http://prntscr.com/80t89x

 

Aguardando feedback de voces