How to deal with getImageData at bounds in Firefox?

Question

I'm currently writing a little drawing application that needs to access pixel data for its smudge and blur tools and bumped into a nasty issue with HTML5 Canvas API in Firefox. Apparently it does not implement getImageData quite as defined in the spec. The spec specifically says "... Pixels outside the canvas must be returned as transparent black. ...".

This doesn't happen in FF (tested in FF 3.6 and 4 beta 9). Instead it will give an error such as this: An invalid or illegal string was specified" code: "12

Note that this appears to work in Chrome just fine.

I guess this means I will have to implement some extra code to work around this limitation. I managed to bypass the issue using the following code:

            getImageDataAround: function(p, r) {
                p = this._toAbsolute(p);
                r = this._toAbsolute(r);

                p = p.sub(r);

                var d = r * 2;
                var width = d;
                var height = d;

                // XXX: FF hack
                if(navigator.userAgent.indexOf('Firefox') != -1) {
                    if(p.x < 0) {
                        width += p.x;
                        p.x = 0;
                    }

                    if(p.y < 0) {
                        height += p.y;
                        p.y = 0;
                    }

                    var x2 = p.x + width;
                    if(x2 >= this.width) {
                        width = d - (x2 - this.width);
                    }

                    var y2 = p.y + height;
                    if(y2 >= this.height) {
                        height = d - (y2 - this.height);
                    }

                    if((width != d) || (height != d)) {
                        // XXX: not ideal but at least this won't give any
                        // errors
                        return this.ctx.createImageData(d, d);
                    }
                }

                return this.ctx.getImageData(p.x, p.y, width, height);
            },

This isn't cool since I return bunch of empty pixels to the caller. It would be way nicer to return results just like in the spec.

Just to clarify the code is a part of a Context API that wraps real context and provides some extra functionality (relative coords etc.). That probably explains where things like this.width etc. come from.

It's the XXX part that's troublesome. I simply need some way to return ImageData that's up to spec. Any ideas on how to do this are welcome. :)

Answer 1

Perhaps you could create a canvas of size d by d and draw the appropriate portion of the original canvas on to it? Sadly you can't draw the original canvas directly because you run into the same sort of bounds-checking code, so you have to figure out the overlap.

You should consider sniffing for Gecko rather than Firefox.

By the way, this is Mozilla bug 392751.

Answer 2

I ended up using following snippet to work around the issue. Hopefully someone finds it useful...

var getImageDataAround = function(ctx, p, r) {
    // ctx: HTML5 Canvas 2D context
    // p: {x: 23, y: 37}
    // r: radius in px

    // FF fails with fractional values
    p.x = Math.round(p.x);
    p.y = Math.round(p.y);
    r = parseInt(r);

    p.x -= r;
    p.y -= r;

    var d = r * 2;
    var width = d;
    var height = d;

    // FF fails at bounds
    if(navigator.userAgent.indexOf('Gecko') != -1) {
        var xOffset = 0;
        var yOffset = 0;

        if(p.x < 0) {
            xOffset = -p.x;
            width += p.x;
            p.x = 0;
        }

        if(p.y < 0) {
            yOffset = -p.y;
            height += p.y;
            p.y = 0;
        }

        var x2 = p.x + width;
        if(x2 >= ctx.canvas.width) {
            width = d - (x2 - ctx.canvas.width);
        }

        var y2 = p.y + height;
        if(y2 >= ctx.canvas.height) {
            height = d - (y2 - ctx.canvas.height);
        }

        if((width != d) || (height != d)) {
            var data = ctx.createImageData(d, d);

            if(xOffset >= d || yOffset >= d ||
                    width < 1 || height < 1) {
                // totally outside of bounds
                return data;
            }

            var originalData = ctx.getImageData(p.x, p.y,
                width, height);
            var pos = 4 * (xOffset + d * yOffset);
            var dataLen = 4 * d * (yOffset + height);

            for(var originalPos = 0, x = xOffset;
                    pos < dataLen;
                    pos += 4, originalPos += 4, x++) {
                if(x == d) {
                    x = xOffset;
                    pos += xOffset * 4;
                }

                if(xOffset <= x && x < width + xOffset) {
                    data.data[pos] = originalData.data[originalPos];
                    data.data[pos + 1] = originalData.data[originalPos + 1];
                    data.data[pos + 2] = originalData.data[originalPos + 2];
                    data.data[pos + 3] = originalData.data[originalPos + 3];
                }
                else {
                    originalPos -= 4;
                }
            }

            return data;
        }
    }

    return ctx.getImageData(p.x, p.y, width, height);
}