Multiple images in html5 canvas not stacking in the right sequence -


I am adding several PNG transparent images above one html5 canvas to another, but they do not pile in the correct sequence ( I have read in other discussions that this may be an ending problem, but there is no solution.

This is my code:

  function drawCanvas () {var canvas; Var reference; Var imgArray = ['Pictures / IMG1 page', 'Pictures / IMG2 page', 'Pictures / IMG3 page', 'Pictures / IMG4 page', 'Pictures / IMG5 page', 'Pictures / IMG6 png ']; Canvas = document.getElementById ('myCanvas'); Context = canvas.getContext ("2d"); (Var i = 0; i & lt; imgArray.length; i ++) for {var img = new image (); Img.src = imgArray [i]; Var drawTee = function (i, context, canvas) {return function () {console.log (i, 'loaded') context.drawImage (this, 0, 0); }}; Img.onload = drawTee (i, context, canvas); }};   

Can anyone help me?

The problem is that the sequence of images on the canvas is determined by the order in which images are over It happens.

Solution: Wait for all the images to load and then add them to the canvas

  function drawCanvas () {var canvas; Var reference; Var imgArray = ['Pictures / IMG1 page', 'Pictures / IMG2 page', 'Pictures / IMG3 page', 'Pictures / IMG4 page', 'Pictures / IMG5 page', 'Pictures / IMG6 png ']; Var images = []; Canvas = document.getElementById ('myCanvas'); Context = canvas.getContext ("2d"); Var loadCount = 0; (Var i = 0; i & lt; imgArray.length; i ++) for {var img = new image (); Img.src = imgArray [i]; Images.push (img); img.onload = function () {if (++ loadCount == imgArray.length) {for (var i = 0; i & lt; imgArray.length; i ++) {context.drawImage (picture [i], 0 , 0); }}}; }};    

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -