title: html5 Image Filters with Canvas
body: <p>I have download the source from this <a href="http://www.storminthecastle.com/projects/imagefilters1/" rel="nofollow">http://www.storminthecastle.com/projects/imagefilters1/</a>. It is regarding some image manipulation in html5 canvas.</p>
  
  <p>Inside the source, it will load the image located in a local directory...</p>
  
  <pre><code>function reset() {
      imageURL = "./sandbox.jpg";
      imageFilter = grayscale;
      document.querySelector("#filename").innerHTML = "";
      update();
    }
  </code></pre>
  
  <p>The above is working in my project. But I am trying to load an image from an url, so I modified it to the following...</p>
  
  <pre><code>function reset() {
      imageURL = "http://xxxxxx.jpg";
      imageFilter = grayscale;
      document.querySelector("#filename").innerHTML = "";
      update();
    }
  </code></pre>
  
  <p>When I test it, the image is being displayed correctly. However, all the features are not working anymore and I don't know why. I have no idea why it cannot take in url as the argument and I don't know how to modify it to make it work. Any helps?</p>