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 isImageData, but all of the following conditions are true, then the method must treat the first argument as if it was anImageDataobject (and thus not raise theTYPE_MISMATCH_ERRexception):
- The method's first argument is an object with
widthandheightattributes with integer values and adataattribute whose value is an integer array.- The
ImageDataobject'swidthis greater than zero.- The
ImageDataobject'sheightis greater than zero.- The
ImageDataobject'swidthmultiplied by itsheightmultiplied by 4 is equal to the number of entries in theImageDataobject'sdataarray.- The
ImageDataobject'sdataarray 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 2.0.0.6 [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6] on Windows XP.