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 anImageData
object (and thus not raise theTYPE_MISMATCH_ERR
exception):
- The method's first argument is an object with
width
andheight
attributes with integer values and adata
attribute whose value is an integer array.- The
ImageData
object'swidth
is greater than zero.- The
ImageData
object'sheight
is greater than zero.- The
ImageData
object'swidth
multiplied by itsheight
multiplied by 4 is equal to the number of entries in theImageData
object'sdata
array.- The
ImageData
object'sdata
array 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.