Today I am going to talk about Canny filter. Canny is a edge detector in image processing. It has been developed by John F.Canny in 1986. He also produced a computational theory of edge detection explaining why the technique works.

In OpenCV library Canny operator can be really helpful especially when you are going to detect a Line or circle in a very simple picture with low noise. It is also really popular algorithm for applying to your pictures and post it on Instagram. Canny function in OpenCV has six argument.


image8-bit input image.
edgesoutput edge map; single channels 8-bit image, which has the same size as image.
threshold1first threshold for the hysteresis procedure.
threshold2second threshold for the hysteresis procedure..
apertureSizeaperture size for the Sobel operator.
L2gradientspecifies the equation for finding gradient magnitude. If it is True, it uses the equation mentioned above which is more accurate, otherwise it uses this function: Edge_Gradient(G)=|Gx|+|Gy|.

if you’re going to install OpenCV.js right now follow out installation tutorial here.

Now lets see how to use canny detector in OpenCV.js. All you need to use Canny filter is this code:

>>cv.Canny(src, dst, 50, 100, 3, false);
First parameter is source image that you choose it by:

let imgElement = document.getElementById(‘imageSrc’);
let src = cv.imread(imgElement);

The second parameter is output image. Other argument are First and second threshold numbers and Not to use L2Gradiant. that’s it. check the code and enjoy.