[whatwg] Canvas and Image problems

Sun May 23 03:33:24 PDT 2010

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