...

View Full Version : Resolved all images added to canvas shows the same content :(



Kitabatake
07-24-2011, 01:32 PM
hiya, I just have a specific question regarding to use a canvas-element with javascript

I have one empty canvas that I want to add 9x7 smaller image elements to, the function "regRead" gets an image-element-code from a global register and that element code is then changed to a base64-encoded string for use as src for the currect image.

the problem is that when i run the script, all the 63 images added to the canvas gets the same content even if imgCode show different values in debug, i appreciate some solution feedback. :)


function UpdateCanvas (CanvId) {
var canvIDNames = ["front", "back"]; // DOM IDs
var currentCanvas = document.getElementById(canvIDNames[CanvId]).getContext("2d");
var newImg = "";
var topLeft = CanvId * 63;
var bottomRight = topLeft + 63;
var xa = 0;
var posX = 0;
var posY = 0;
var imgCode = "";
for (xa = topLeft; xa < bottomRight; xa++) {
newImg = new Image();
imgCode = regRead(xa, 1);
newImg.src = getBase64src(imgCode);
newImg.onload = function () {
currentCanvas.drawImage(newImg, posX, posY);
if (posX == 400) {
posX = 0;
posY += 90;
}
else {
posX += 50;
}
}
}
}

devnull69
07-24-2011, 01:52 PM
What does regRead() do?

Kitabatake
07-24-2011, 02:39 PM
What does regRead() do?

regRead gives a hex-code such as "0F" or "A4" used for addressing a register inside getBase64src which contain an array of different base64-strings used for src to the image

devnull69
07-24-2011, 03:06 PM
Let me guess: It is always the very last image that is actually showing everywhere?

Kitabatake
07-24-2011, 03:37 PM
Let me guess: It is always the very last image that is actually showing everywhere?

it seems so, i might wanna try to modify the src for each new image inside the onload-function, but i dont know if that is feasible with this loose function declaration tied to onLoad.

devnull69
07-24-2011, 04:05 PM
The problem is due to a racing condition. You are creating new images with the same variable name faster than they can be loaded. So the last one wins.

Solution: Create a "loose loop" so that you load the new picture only after the "old" one has finished loading.

Kitabatake
07-24-2011, 04:36 PM
The problem is due to a racing condition. You are creating new images with the same variable name faster than they can be loaded. So the last one wins.

Solution: Create a "loose loop" so that you load the new picture only after the "old" one has finished loading.

seems possible, can i get a clue how to start with that? ^^

edited: after yet some more googling, i found this (http://stackoverflow.com/questions/5663759/is-it-possible-to-use-multiple-images-in-an-html5-canvas).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum