[whatwg] Canvas and Image problems

Sun May 23 19:48:32 PDT 2010

You could also add a listener to the image to check that it actually loads:

$(document).ready(*function*() {

      *var* image = $("#cat").get(0);

      image.onload = function(e){

          *var* cv = $("#img_container").get(0);

          *var* ctx = cv.getContext('2d');

          ctx.drawImage(image, 0, 0);

            };
});

On Sun, May 23, 2010 at 10:30 PM, Schalk Neethling <
schalk at ossreleasefeed.com> wrote:

> 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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20100524/e9be7e8f/attachment-0002.htm>