title: JavaScript Sharpen Image and Edge Detection not working
body: <p>I made a simple web application of Image Manipulation/filters with HTML5 and JavaScript. Every filters are working fine like Brightness, Grayscale, Negative etc. Except Sharpen Image, Edge-detection all kinds of Neighbourhood operation are not working. </p>
  
  <p>I have tried every possible way, tried to google, looked for references but failed. The references that I found shows the Matrix system, I know the concept of the Matrix System, but don't know how to apply. It would be kind if I can get a solution of my problem. Please see my codes below, for the time being, I am posting my Sharp an image codes.</p>
  
  <p>I Found Something like this to sharp an Image
  ( [  0, -1,  0,
      -1,  5, -1,
       0, -1,  0 ]), but how to apply I dont know. So I tried to apply it like the codes below</p>
  
  <pre><code>&lt;script&gt;
  function pic() {
  var c = document.getElementById('myCanvas');
              var ctx = c.getContext('2d');
  var btnsharpen = document.getElementById('btnsharpen');
  var img = new Image();
  
              img.onload = function () {
                  ctx.drawImage(img, 0, 0);
              }
  
  //sharp the image
  btnsharpen.onclick = function(){
          ctx.drawImage(img, 0, 0);
          var imgData = ctx.getImageData(0,0, c.width, c.height);
  
          var pixels = imgData.data;
          var numPixels = ((imgData.width-1) *(imgData*4)+ ((imgData.height)*4)); 
          for (var i = 0, n = numPixels; i &lt; n; i +=4) {
              var sharpen = (pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0) +
                (pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
                (pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0) +
                (pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
                (pixels[i] * 5 + pixels[i + 1] * 5 + pixels[i + 2] * 5) +
                (pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
                (pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0) +
                (pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
                (pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0);
  
              pixels[i] = sharpen; // red
              pixels[i + 1] = sharpen; // green
              pixels[i + 2] = sharpen; // blue
              }
  
              ctx.putImageData(imgData, 0, 0);
              img.src = "image/Angelina_Jolie.jpg";
          }
  &lt;/script&gt;
  
  &lt;body onLoad="pic()"&gt;
  &lt;canvas id='myCanvas' width='500' height='375' style='border:solid 1px #000000'&gt;&lt;/canvas&gt;
  &lt;input type="button" value="Sharpen" class="buttons" id="btnsharpen" /&gt;&lt;br /&gt;
  &lt;/body&gt;
  </code></pre>