View Full Version : Canvas.drawImage

03-24-2009, 01:42 PM
Hello there,
I need help fixing this firefox problem using 3D Carousel (http://interface.eyecon.ro/demos/carousel.html) in Firefox 3.0.3. I works fine in all other browsers including IE which usually is the problem.

I keep receiving this error:

[Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file://assets/js/carousel.js :: anonymous :: line 88" data: no]

Line 88 is height


Any help would be much appreciated.
Thanks in advance.

03-24-2009, 02:35 PM
Not enough info. Can you make a link?

03-24-2009, 03:07 PM
Hello there,
Thanks for the reply,
You can have a look at http://www.ryancouser.com/test/index.html

Not enough info. Can you make a link?

03-24-2009, 03:17 PM
What's the problem? It works fine for me.

03-24-2009, 03:56 PM
Yeah, I noticed it loads fine sometimes but try and hard refresh (Ctrl + F5)

03-24-2009, 04:12 PM
It seems like an error you get when you try to draw an image before it's loaded.
The error highlighted the height parameter. That means, I think anyway, that the height property is NAN. The only way I could see that happening is if it tried to run the script before all the images were loaded. The first time the page loads it works. Any reloads break the script. It has to be the images not loading before the script runs. Does it have a pre-load for the images? Make sure you declare each image and give a src for them all before you start the script.

03-24-2009, 04:32 PM
strange. It will reload your online page with the refresh button, but as you said, using f5 breaks it.

On my local machine I can't get the refresh button to work.

heheh I put an alert in the function to see what height value was and it's 0 for each of the 4 iterations. But more importantly, the script doesn't break when the pause is added from the alert.

if (jQuery.browser.msie) {
canvas = document.createElement('img');
jQuery(canvas).css('position', 'absolute');
canvas.src = image.src;
canvas.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=60, style=1, finishOpacity=0, startx=0, starty=0, finishx=0)';

} else {alert(height);

the snippet is incomplete, just grab the alert and stick it in your script to see what I mean
it has to be that it's trying to draw before it has the image

03-24-2009, 04:38 PM
This is one bizarre problem, i don't understand why its just Firefox.
I've tried other browsers even IE 6 and it works on reload.
How would I go about preloading the image using jquery.

03-24-2009, 04:48 PM
That I don't know. But you don't need Jquery to do it, just do this for all the images and make sure you have a new start function you call that does this first and then loads the page. I think that will work.

var image1=new Image()

even if you don't use the var names you give them, they will at least be cached.
This is how I understand canvas and images, but I might be wrong. I'm not a real coder, I just like messing canvas and javascript.

03-24-2009, 04:52 PM
You've been great help, thank you very much.
At least we know the basic issue is that the js is loading before the images.
I will play about with preloading images.
Thanks again

03-24-2009, 05:30 PM
Just for anyone else's information I got the problem sorted by preloading the images before the carousel was called using

jQuery.preloadImages = function(){
for(var i = 0; i<arguments.length; i++)
jQuery("<img>").attr("src", arguments[i]);
$.preloadImages("carousel/wkd.png", "carousel/woodys.png", "carousel/shloer.png", "carousel/merrydown.png");

03-24-2009, 06:41 PM
Where's that code go? LOL Now I'm stumped. I have a hard time following JQuerry sometimes. I just wanted to keep the file to look at if I need ideas later on and it would help to have it work right.

03-26-2009, 01:54 PM
Hey TinyScript,
You just put this preload code at the beginning of the carousel.js file and it loads the images before executing the script. Works brilliantly. Makes the carousel load much smoother.