Image Loading Probelm

by John Doe

HTML

<body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
</body>

JavaScript

var Handler = function (canvasId, imageSrc, callback) {
    this.callback = callback;
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext("2d");
    var self = this;
    var image = new Image();
    //image.crossOrigin = 'anonymous';
    image.src = imageSrc;
    image.onload = function () {
        self.canvas.width = this.width;
        self.canvas.height = this.height;
        self.ctx.drawImage(image, 0, 0, self.canvas.width, self.canvas.height,
        0, 0, this.width, this.height);
        self.callback(self);
    };

    this.applyFilter = function (filter) {
        //some unimportant code code....
        this.ctx.fillRect(50,50,200,200);
        alert('apply filter');
    };

    this.toGrayScale = function () {
        var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
        for (var i = 0; i < imgData.data.length; i += 4) {
            var brightness = 0.34 * imgData.data[i] + 0.5 * imgData.data[i + 1] + 0.16 * imgData.data[i + 2];
            imgData.data[i] = brightness;
            imgData.data[i + 1] = brightness;
            imgData.data[i + 2] = brightness;
        }
        this.ctx.fillRect(50, 50, 100, 100);
        this.ctx.putImageData(imgData, 50, 50);
        alert('grayscale');

    };


    //while(!this.finish){};

}; //end constructor

var handler = new Handler("myCanvas", "http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png",function(self){
self.applyFilter(1); //will be executed before image has loaded if you remove while loop
self.toGrayScale();
});