Error in a particular condition, long to explain

Maybe it's not the right direction, but probably @Ashley knows what we are talking about.

On iOS4 (not 5)and Android too, this plugin (inject)make the entire canvas hang completely. Xcode do not show anything (because it do not have a js debugger) instead LogCat in Eclipse fires this:

INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

The incriminating line is this one: ctx.drawImage(cur_image, myx, myy, this.width, this.height);

Any idea why and how to fix it?

@Ashley thanks for your help. But something else is wrong here. I wrapped your code to check:

if(this.height>0&&this.width>0){
                    ctx.drawImage(cur_image,
                               myx,
                               myy,
                               this.width,
                               this.height);
               }

And it throws the same error here: this.height.
Why do you think this is happening?

It's very strange, the plugin is a behaviour that is doing this:

this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.src = '';
          this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.src = base64string;
          this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.onload = (function (self) {
               return function(info) {
                    cr.runtime.redraw = true;
               };
          })(this);

where base64string is the url of the image. The line that throws this error is just this one: this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.src = base64string; even deleting all the rest it still throws that error.

All the browser do not, only android 2.2 and iOS 4.X

It seems strange, but maybe you have an idea about the reason this might happen and how to mitigate it, is there any other way except .src to load an image inside a sprite?

Thanks

Edit: @Ashley sorry to bother you about this but you are the only one that can point me in the right direction

Edited by 0plus1 - 14 Apr 2012 at 9:08am

@Ashley The url point to an image. On device to emotions/xyz.png (xyz is the image name that changes everytime) for testing is set to http://u.dropbox.com.../emotions/xyz.png. The images works, this is an error specific to androdid 2.2 and ios4.x on "moderner" browsers it works without problem. I discovered that after .src the content of:

this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.width (and height) are both 0. While before .src where equal to this.inst.width/height. I thought that was the problem, but even if I set:

this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.width = this.inst.width;

(same for height) the error still happens (and the value is set after cheching with console.log). Tomorrow I'll try your solution.
But I think that what happens is that after .src the .width/height goes to 0 and the engine picks that for the tick it takes to set the correct value (as it's async).

@Ashley, @0plus1 : I used

src = '';

because I read somewhere that for V8 (WebKit JS engine), it help the GC to catch faster the image to delete (the one referenced there before), but I can't find the reference anymore.
I have updated the plugin, and I'm going to post it in a few minutes.
One a problem that I have is that when you inject an image, you are 'loading' it (regarding the way the browser deal with it). And before loading it, you don't know its width/height.
I added some code to specify the width/height of the Sprite container (not the underlying IMGElement width/height), because I can't manage to force the browser to update the image when I set those.
With the new build, @0plus1, can you test and say if you still have the problem (I have tested it on FF 11, Chrome 16+, Opera 11+ and iOS5.1). I don't have any device with iOS < to 5 now, so I can't test it on that, neither on Androïd.
See you in the other thread .