color to grey scale conversion in canvas

Question

I am trying out a sample code that converts a color image to grey scale on a canvas in WebOS (enyo). When I use the ctx.getImageData method to read the pixels, the imageData contains only zeros. The sample I am using is provided in the link below:

http://chopapp.com/#x8t2ymad

Does WebOS support reading pixel data from canvas? Am I doing something wrong here?

I have refered to the following link for the logic and the code:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-transition-an-image-from-bw-to-color-with-canvas/

This works fine.

Answer 1

you should move the getimagedata in the callback from the onload event of the image.

something like:

draw: function(image) {
    this.ctx.drawImage(event.target, 0, 0);
    this.greyImage();
},

and set the source after binding the event

image.onload = enyo.bind(this, "draw");
image.src = "images/image.png";

to avoid a racing condition

now the imagedata is retrieved before the actual pixels are loaded. Which results in an empty array.