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.

score 3 · Accepted Answer · edited May 23 '17 at 11:59

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?

score 0 · Answer 2 · answered Sep 24 '14 at 05:15

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

score -1 · Answer 3 · answered Jun 09 '12 at 12:18

-1

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.

answered Jun 09 '12 at 12:18

tnt-rox

5,400
2
38
52

if you read the article i supplied you might have noticed your missing frame pointer. – tnt-rox Jun 10 '12 at 09:24
I'm not missing a frame pointer as I said there is more to the window.requestAnimationFrame that is not included in the code above as I don't believe it is relevant. This is not a latency issue - read the symptoms I am experiencing - I have some complex particle animation running of this very same code and they run perfectly - this is something to do with a change in image data between getImageData and putImageData I believe. Note that I say that "This code should do nothing!" (if it's working correctly) so why is the image degrading rapidly over time? – Rob Jun 11 '12 at 13:22
@Rob, I am unable to recreate the problem on FF14.0, can you fiddle the actual code? and what browser are you using? I did notice a glitch with one of my png files. maybe worth a try with a different image! – tnt-rox Jun 12 '12 at 02:20
I'm using Chrome - I'll check it out in FF when I get home and post the rest of the code in the question area - I can't run it in JS fiddle due to cross-domain getImageData restriction... unless there's a way round it. – Rob Jun 12 '12 at 07:00
@rob I have tried chrome, still unable to recreate the problem. WRT your actual need: I would suggest that you alter the alpha channel of the mouse location on your off screen. var idx = (x + (y * imagedata.width)) * 4; imagedata.data[idx+3] = 0; //alpha channel.... then reset the original background image and putimagedata(imagedata... – tnt-rox Jun 12 '12 at 10:15

html5 getImageData then putImageData results in fading image

3 Answers3

Linked