[RESOLVED] putImageData always blank after pixel-by-pixel processing
I'm quite new to HTML5, so i guess i'm just doing something wrong. What exactly is wrong is beyond me :(
So, i have a canvas element with an image already put onto it by the "drawImage" function.
Then i implement this seemingly easy piece of code:
and after the "putImageData" method is implemented, i'm left with a blank canvas instead of at least something.
var imgD = document.getElementById(canvas_ID).getContext("2d").createImageData
for (var i = 0; i < imgD.data.length; i += 4)
imgD.data[i ] = 255 - imgD.data[i ]; // red
imgD.data[i+1] = 255 - imgD.data[i+1]; // green
imgD.data[i+2] = 255 - imgD.data[i+2]; // blue
// leaving the alpha channel as it is
document.getElementById(canvas_ID).getContext("2d").putImageData(imgD, 0, 0);
Moreover, this part of code is basically ripped off this tutorial.
Somehow, there it works. On my page, it doesn't so far.
Any help will be much appreciated!