Я пытаюсь преобразовать цветное изображение в оттенки серого при наведении курсора мыши, используя JavaScript в Firefox. Пока у меня есть это:
<!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>
Что выдает эту ошибку:
Line: 9
Error: Object doesn't support this property or method
Как мне это исправить?