Using "new Image()" in extension creates wrong object

[ElDoRado1239]

I've just run into a strange bug - running this correct code (from an extension) :var img = new Image();

img.src = '...';

...

ctx.drawImage(img,0,0);...will throw a Type Error, whilevar img = document.createElement('img');

img.src = '...';

...

ctx.drawImage(img,0,0);...works.

Turns out this bug also affected Chrome since a more than a year old update:

https://code.google.com/p/chromium/issues/detail?id=238071

[SWFlash0]

Why are you trying to draw an empty image, anyway? First of all you need an src, then you need to add an onload event for the image element, and only then draw it on canvas, you also don't have width and height in drawImage function, here's an example how it should look like:var canvas=document.createElement('canvas')

var context=canvas.getContext('2d')

var image=new Image

image.addEventListener('load',function(){

    canvas.width=image.width

    canvas.height=image.height

    context.drawImage(image,0,0,image.width,image.height)

})

image.src='http://my.imagecache.maxthon.com/avatar/2/065/2065060/1311276529.png'

[ElDoRado1239]

Sorry for the confusion - that was just an example. I was, of course, using an image with correct source.

Here's a better example of this problem. If I use "var original = new Image()" it crashes on the type error. If I use "var original = document.createElement('img')" it works. And the rest of the code is always the same.

But it may be a problem only for scripts ran by extensions...

[SWFlash0]

Uh, again, you messed up the syntax of drawImage function, there are five required attributes that you need to set

context.drawImage( , , , , )

As to why it work with img for you I have no idea

[ElDoRado1239]

No no, my code is correct. Check the W3Schools:

http://www.w3schools.com/tags/canvas_drawimage.asp

.drawImage is overloaded, you can use it like you say to draw a portion of the image/image scaled over area or like I use it to draw the whole image.

[SWFlash0]

Just post your whole code, because I can't reproduce it at all

[ElDoRado1239]

Try running this from the console:var c = document.createElement('canvas').getContext('2d'); c.fillRect(5,5,10,10); var iDCE = document.createElement('img'); var iNew = new Image(); iNew.src = c.canvas.toDataURL(); iDCE.src = c.canvas.toDataURL(); console.log(iDCE,iNew); c.drawImage(iDCE,0,0); console.log('DCE ok'); c.drawImage(iNew,0,0); console.log('New ok');

[SWFlash0]

Seriously? What is going on?

Edit: Seriously now

So what I can take from this, extension javascript uses some weird implementation of Image object in contrast to page javascript, it doesn't even return a node

[ElDoRado1239]

Yup, pretty much what you say. Weird.

Also that code I posted above started to work for me since I have updated my 4.4.3.800 version to 4.4.3.2000. It was throwing the type error even in the console, not using the extension. So that seems to be fixed...

But extensions still mess the Image object up.