[whatwg] Canvas and Image problems

Sun May 23 05:30:32 PDT 2010

Jip, using $(window).load() works perfect.

-----Original Message-----
From: Eduard Pascual [mailto:herenvardo at gmail.com] 
Sent: Sunday, May 23, 2010 12:33 PM
To: Schalk Neethling
Cc: whatwg at lists.whatwg.org
Subject: Re: [whatwg] Canvas and Image problems

On Sun, May 23, 2010 at 12:16 PM, Schalk Neethling
<schalk at ossreleasefeed.com> wrote:
> Hi everyone,
>
>
>
> Having a really weird problem that I would like some input on. I am 
> trying to draw an image, as well as video, onto canvas. I use the 
> simple code
> below:
>
>
>
> $(document).ready(function() {
>
>       var image = $("#cat").get(0);
>
>
>
>       var cv = $("#img_container").get(0);
>
>       var ctx = cv.getContext('2d');
>
>
>
>       ctx.drawImage(image, 0, 0);
>
> });
>
>
>
> When I load up the HTML page in Chrome absolutely nothing happens and 
> I see no errors in the JavaScript console. When running it in Firefox 
> 3.6.3 I get the following error:
>
>
>
> uncaught exception: [Exception... "Component returned failure code:
> 0x80040111 (NS_ERROR_NOT_AVAILABLE)
> [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 
> (NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::
> file:///C:/thelab/HTML5Canvas/scripts/canvas_img.js :: anonymous :: line
9"
> data: no]
>
>
>
> For The life of me I cannot see what I am doing wrong with the above. 
> I have done console logs to ensure that the code get’s the image as 
> well as the canvas on the relevant lines and it definitely does. 
> Anything I am overlooking?

IIRC correctly, jQuery's document ready event is fired as soon as the HTML
itself is loaded and the DOM is built, unlike <html>'s onload which waits
also for all external stuff (CSS, JS, images, etc) to be available. This is
a good thing to speed up things that don't depend on external content but,
in your case, it seems you are trying to use the src resource of an <img>
element before it's available. I'm no jQuery expert, so I can't tell for
sure; but you may check it out by running your code from <html>'s onload
event instead of the document ready event.

Regards,
Eduard Pascual