Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Canvas.drawImage

    Hello there,
    I need help fixing this firefox problem using 3D Carousel in Firefox 3.0.3. I works fine in all other browsers including IE which usually is the problem.

    I keep receiving this error:
    Code:
    [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
    Code:
    context.drawImage(
    image, 
    0, 
    0,
    el.carouselCfg.itemWidth, 
    height);
    Any help would be much appreciated.
    Thanks in advance.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Not enough info. Can you make a link?

  • #3
    New Coder
    Join Date
    Sep 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello there,
    Thanks for the reply,
    You can have a look at http://www.ryancouser.com/test/index.html

    Quote Originally Posted by TinyScript View Post
    Not enough info. Can you make a link?

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts

    What's the problem? It works fine for me.

  • #5
    New Coder
    Join Date
    Sep 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah, I noticed it loads fine sometimes but try and hard refresh (Ctrl + F5)
    Thanks

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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.
    Code:
    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

  • #8
    New Coder
    Join Date
    Sep 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Thanks

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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()
    image1.src="blahblah.jpg"
    .....

    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.

  • Users who have thanked TinyScript for this post:

    rcouser (03-24-2009)

  • #10
    New Coder
    Join Date
    Sep 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #11
    New Coder
    Join Date
    Sep 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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");

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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.

  • #13
    New Coder
    Join Date
    Sep 2008
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •