如何使用JavaScript在Firefox中的mouseover上顯示圖像的灰度版本？

我想在Firefox中使用JavaScript將mouseover上的彩色圖像轉換爲灰度圖。到目前爲止，我有這樣的：如何使用JavaScript在Firefox中的mouseover上顯示圖像的灰度版本？

<!DOCTYPE html> 
<html> 
    <head> 
     <title> New Document </title> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var area = document.getElementById('area'); 
       alert('area:'+area); 
       var context = area.getContext('2d'); 
       alert('context:'+context); 

       if (context) { 
        var imgd = context.getImageData(0, 0, 500, 300); 
        var pix = imgd.data; 

        for (var i = 0, n = pix.length; i < n; i += 4) { 
         var grayscale = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
         pix[i] = grayscale; // red 
         pix[i+1] = grayscale; // green 
         pix[i+2] = grayscale; // blue 
        } 

        context.putImageData(imgd, 0, 0); 
       } 
      }; 
     </script> 
    </head> 

    <body> 
    <canvas id="area" width="500" height="300"> 
     <img id="canvasSource" src="http://www.treehugger.com/elephant-national-heritage-animal-india.jpg" alt="Canvas Source" /> 
    </canvas> 
    </body> 
</html>

將會產生這個錯誤：

如何糾正呢？

來源

2011-08-26 Aravinth