html5图片边缘检测,javascript

我使用HTML5和JavaScript开发了一个简单的图像处理/滤镜Web应用程序。 每个滤镜都可以正常工作，例如亮度，灰度，负片等。除了“锐化图像”，“边缘检测”以外，各种“邻域”操作均不起作用。

我尝试了所有可能的方法，尝试使用google，查找引用，但失败了。 我找到的参考资料显示了Matrix系统，我知道Matrix系统的概念，但不知道如何应用。 如果我能解决我的问题，那将是一种帮助。 请暂时在下面查看我的代码，我正在向Sharp发布一个图像代码。

我发现这样的东西可以锐化图像([0，-1，0，-1，5，-1，0，-1，0])，但是如何应用我不知道。 所以我尝试像下面的代码一样应用它

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 =