关于html5中的canvas的反色问题

在网上下的html5中关于canvas的反色问题的程序，不知道为什么运行不出来，跟我在一本书上找到的程序是一样的，那个也运行不出来，不知道是什么问题，源程序如下，请大家指教·····<!DOCTYPE HTML>   
<html>   
  <head>   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  <title>PaoPaoGame</title>   
  <!-- <script type="text/javascript" src="src/Main.js"></script> -->   
  <script type="text/javascript">   
  var context = null;   
  var image = null;   
  function loadImage() {   
  var main = document.getElementById("maincanvas");   
  if(main == null)   
  return false;   
  context = main.getContext("2d");   
  drawImage();   
  }   
   
  function drawImage() {   
  //反色效果   
  var imgSrc = document.getElementById("image");   
  context.drawImage(imgSrc, 0, 0);   
  var imgd = context.getImageData(0, 0, 120, 120);   
  var pix = imgd.data;   
  for(var i = 0, n = pix.length; i < n; i += 4) {   
  pix[i] = 255 - pix[i];   
  pix[i + 1] = 255 - pix[i + 1];   
  pix[i + 2] = 255 - pix[i + 2];   
  }   
  context.putImageData(imgd, 0, 0, 120, 120);   
  }   
  </script>   
  </head>   
  <body onLoad="loadImage()">   
  <canvas id="maincanvas" width ="800" height ="600" >   
  <img src="imgs/u1.png" width="120" height="120" id="image" />   
Sorry, your browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, IE9 etc.   
  </canvas>   
  </body>   
</html>