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
Post a Comment