html5 getImageData then putImageData results in fading image

Question

I'm very new to Html5 and I was wondering if someone could shed some light on this:

<script type="text/javascript">
        window.onload = function () {

            var canvas = document.getElementById('canvas'); //682 x 111 pixel canvas
            var context = canvas.getContext('2d');

            var image = new Image();
            image.src = "/Content/ImageTestOne/logo-for-dissolve.png"; //682 x 111 pixel image
            image.onload = function () { context.drawImage(image, 0, 0); drawFrame(); };

            function drawFrame() {

                window.requestAnimationFrame(drawFrame, canvas);

                imageData = context.getImageData(0, 0, canvas.width, canvas.height);

                //Do something to some pixels here that persists over time

                context.clearRect(0, 0, canvas.width, canvas.height);

                context.putImageData(imageData, 0, 0);
            };

       };
</script>

According to my limited knowledge of Html5 this code should do nothing except continually display the "image". But instead the image quite rapidly burns out to almost white which suggests that the imageData is changed slightly each time it is either read from or written to the canvas...

Basically I wanted to fade the image where the mouse was located so that a background image shows through as the mouse is moved around. Is there a way around this or am I going to have to become a little more creative with the process? Is there anyway I can manipulate the "image" ImageData rather than getting it from the canvas each time?

Thanks in advance, I've tried using jpg and png and loading into DOM rather than via image.src but they all have the same issue.

Using the latest Chrome btw.

Here is the setup for the requestionAnimationFrame to handle a range of browsers with a fail over to SetTimeout:

(!window.requestAnimationFrame)
{
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback) {
                        return window.setTimeout(callback, 1000/60);
                    });
}

Here is the code for the canvas

<canvas id="canvas" width="682" height="111"></canvas>

That's all the code for this.

Answer 1

putImageData() and getImageData() can be lossy. There's a note in the spec about this:

Due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values.

See also this related question: Why does HTML Canvas getImageData() not return the exact same values that were just set?

Answer 2

requestAnimationFrame is an experimental feature (june 2012) that uses time based frame access. The reason for this is avoid latency in animations. I suggest you take a look at this Moz article.

Answer 3

I have tried also to apply this to my game where in im going to manipulate the selected pixels to have effect but It doesn't give me the expected result

here is some sample code that i used to manipulate the pixel to change

get image information and store

var img = context.getImageData(0,0, width, height)
var imgdata = img.data
var len = imgdata.length

loop to all data and manipulate pixel information

var i = 0;

for(i; i<leng; i++) {
    var red = imgdata[i]
    var green = imgadata[i+1]
    var blue = imgdata[i+2]
    var alpha = imgdata[i+3]

    imgdata[i] = new value
    imgdata[i+1] = new value
    imgdata[i+2] = new value
    imgdata[i+3] = new value
}

context.putImageData(img, 0,0)

then create animation frame to see effect