Canvas Image Not Rendering In Chrome (works In Ff4 & Ie9)

I'm stumped. For the life of me, i have no idea why this is not working in Chrome. You can see the code here: http://jsfiddle.net/corydorning/NgXSH/ When i pull this code up in FF

Solution 1:

The problem appears to be that you're not waiting for the original image element to get loaded. If you change it around a little, it works fine:

  $(function() {
    var canvas = document.createElement('canvas'),
    canvasExists = !!(canvas.getContext && canvas.getContext('2d')),
    oImage = $('img')[0];

    if (canvasExists) {
      var context = canvas.getContext('2d'), img = newImage();

      img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;

        $(oImage).replaceWith(canvas);

        context.drawImage(oImage, 0, 0);
      }

      img.src = oImage.src; 
    } else {
      // apply MS filters
    }

Solution 2:

It could be hard to use img.onload if you have plenty of them. An easy way in chrome to wait for image loading is to use :

$(window).load(function () {

instead of

$(document).ready(function () { 

as $(window).load is actually waiting for all image to be loaded.

It's work perfecly for using the image in the canvas. (work also in firefow and IE)