Image manipulation in canvas

I have a number of images within #mycontainer like:

<div id="mycontainer">

    <img src="http://localhost:8080/images/my-image.png" />

    …

</div>

I need to convert those into B/W. Pretty common task but I didn't find any solution for this that would just work for me — there is some problem with the actions execution. What I have now is the following:

function grayscale(src) {

    var ctx = document.createElement('canvas').getContext('2d'),

        imgObj = new Image(),

        pixels, i, n, gs, url;



    // wait until the image has been loaded

    imgObj.onload = function () {

        ctx.canvas.width = this.width;

        ctx.canvas.height = this.height;

        ctx.drawImage(this, 0, 0);

        pixels = ctx.getImageData(0, 0, this.width, this.height);

        for (i = 0, n = pixels.data.length; i < n; i += 4) {

            gs = pixels.data[i] * 0.3 + pixels.data[i+1] * 0.59 + pixels.data[i+2] * 0.11;

            pixels.data[i] = gs;   // red

            pixels.data[i+1] = gs;   // green

            pixels.data[i+2] = gs;   // blue

        }

        ctx.putImageData(pixels, 0, 0);

    };

    imgObj.src = src;

    return ctx.canvas.toDataURL('image/png');

}

In general the actions are:

• I supply src of an image to process,
  


• wait for the image to be fully loaded,
  


• draw the image on the canvas, convert the pixels and put the converted pixels back on the canvas
  


• then I want the data URL of the resulting image from the canvas to be returned.
  

Right now, when in Developer Tools I am tring something like:

c = $('#mycontainer').find('img')[0];

grayscale(c.src);

I get back data URL of a fully transparent default 300px x 150px canvas as if that imgObj.onload() doesn't exist in the script at all.

Can anybody point me to a mistake here please?