HTML5 pixel manipulation is not working

Question

I'm trying to manipulate the pixels of an image to invert the color and write back to the canvas. But it's not working. Here's the code:

<script type="text/javascript">
<!--
window.addEventListener('load', function () {
  var elem = document.getElementById('myCanvas');
  var context = elem.getContext('2d');
  var img = new Image();

  img.addEventListener('load', function () {
      var x = 0, y = 0;

      context.drawImage(this, x, y);

      var imgd = context.getImageData(x, y, this.width, this.height);
      var pix = imgd.data;

      for (var i = 0, n = pix.length; i < n; i += 4) {
        pix[i  ] = 255 - pix[i  ]; // red
        pix[i+1] = 255 - pix[i+1]; // green
        pix[i+2] = 255 - pix[i+2]; // blue
      }

      context.putImageData(imgd, x, y);
  }, false);

  img.src = 'test.jpg';
}, false);
// -->
</script>

And the 'Test.jpg' is on the same folder as the script. Am I missing anything? It displays the same image without inverting.

Answer 1

the answer to your question is right here

Tested on chrome, and it seem to be the file:// scheme that breaks it. When I moved the script to my local server (http://) instead of running the file (file://), it worked!

Proof: