Html5 : Getimagedata With Onmousemove Make Slow My Application In Firefox

I create a little html5 game with canvas. In the canvas, there are many displayed sprites and one of them move automatically from left to right. The others are statics. When I mov

Solution 1:

Not sure how much of a performance gain you'd get with this - no need to clear the temp canvas between sprites .... the pixel is clear until a sprite is painted on it!

I've referenced a function called checkBoundingBoxisOver - not sure if you could write this function, but I can't right now - besides, I don't even know what your array_objects are!!!

I would think it were simple, just need the x, y, width, height of a sprite to do a preliminary check if the sprite could even possibly be under the mouse before doing the expensive draw

function getSelectedObject(array_objects) {
    //Clear the temporary canvas :
    tmpcx.clearRect(0, 0, tmpc.width, tmpc.height);
    var sprite;
    /*Search the right sprite object :*/for (var i = array_objects.length - 1; i >= 0; i--) {

        sprite = array_objects[i];

        if (checkBoundingBoxisOver(sprite, mouse_x, mouse_y)) {

            sprite.draw(tmpcx);
            imageData = tmpcx.getImageData(mouse_x, mouse_y, 1, 1);
            component = imageData.data;
            if (component[3] > 0) {
                return sprite;
            }
        }
    }
    returnfalse;
}

Solution 2:

I ran into a similar issue reading pixels from a large bitmap every frame of the animation. In my case it is a black and white image showing where the world is water or land.

getImageData is extremely slow on Firefox even when reading just a single pixel.

My solution is to call getImageData only once and store the result in a imageData variable

var imageData = self.context.getImageData(0,0,image.width, image.height);

Then you can make repeated calls to the image data and pull out the part of the image you want. In my case I just need a single pixel or a single color which looks like this

var pixelRed = this.imageData.data[(y* imageWidth * 4) + (x * 4)] == 0;

x and y are self explanatory and since the pixels are 4 byte values (Red, Green, Blue, Alpha) I need to multiply my array index by 4. It proves to be very fast for me.

It be pretty easy to use this code to grab any portion out of the array directly as long as it is not too big.