javascript canvas putImageData not writing modified data

Question

I'm attempting to desaturate an image. I'm currently loading it, parsing the image data, but I can't get it to write back to the canvas.

I've followed all of the directions to do

context.putImageData(imagedata,0,0);

I do this, but the image data doesn't change. "ctx" is the context of the image that is previously loaded that is being turned greyscale.

 greyscale: function grayscale(ctx){

  var id = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height);

  for(var i=0; i<id.height; i++){
   for(var e=0; i<id.width; i++){

    var index = (e*4)*id.width+(i*4);

    var avg = (id.data[index] + id.data[index+1] + id.data[index+2]) / 3

    id.data[index] = avg;   
    id.data[index+1] = avg;
    id.data[index+2] = avg;
   }
  }

  ctx.putImageData(id,0,0);

 }

Answer 1

Maybe not the answer you seek, but have you looked at flot.js? Nice charting features and the source code is available for perusal.

Answer 2

Your inner loop is comparing and incrementing i instead of e.

You also have e and i switched when you calculate the index. It should be (with the 4 factored out):

var index = 4 * (i*id.width + e);

Answer 3

the problem is here :

for(var e=0; i<id.width; i++){

your "e" is not rise up