I was giving finishing touches to the Seam Carving Demo that I have been working on for quite some time now, when I stumbled on a strange problem. The canvas implementation in Firefox seemed to be very slow and unsuited for image manipulation. The script was taking too long to execute.
At one instant, I did something like canvas.getContext('2d').putImageData(null,0,0). Well, I did not explictly pass the null to putImageData, the imageData that I was passing somehow got corrupted, and hence, a null arguement was passed to putImageData.
Quoting the HTML 5 specifications
If the first argument to the method is not an object whose [[Class]] property is
ImageData, but all of the following conditions are true, then the method must treat the first argument as if it was an
ImageDataobject (and thus not raise the
- The method's first argument is an object with
heightattributes with integer values and a
dataattribute whose value is an integer array.
widthis greater than zero.
heightis greater than zero.
widthmultiplied by its
heightmultiplied by 4 is equal to the number of entries in the
dataarray only contains entries that are in the range 0 to 255 inclusive.
The first argument was not a class of type ImageData (it is null), and hence none of the other conditions are satisfied. Hence, by the specifications, a TYPE_MISMATCH_ERR should have been raised. However, all firefox does is crash the browser in my case.
Here is the link to the page that could potentially crash Firefox. I tried googling for this error, but could not find any existing reference to an error as this. For the record, I used Firefox 126.96.36.199 [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:188.8.131.52) Gecko/20070725 Firefox/184.108.40.206] on Windows XP.