A client-side JavaScript implementation of Canny Edge Detection
Switch branches/tags
Nothing to show
Clone or download
Yuta Hashimoto Yuta Hashimoto
Yuta Hashimoto and Yuta Hashimoto fixed typo
Latest commit 278d07d Dec 6, 2014
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples fixed typo Dec 6, 2014
.gitingore fixed typo and added .gitignore Nov 23, 2014
LICENSE Initial commit Nov 23, 2014
README.md fixed typo and added .gitignore Nov 23, 2014
canny.coffee initial commit Nov 23, 2014
canny.js initial commit Nov 23, 2014
canny.min.js initial commit Nov 23, 2014


Canny JS

A (client-side) JavaScript implementation of Canny Edge Detection based on HTML5 canvas API.


Visit the demo page to see it in action.


Include canny.min.js in your html file:

	<script src="js/canny.min.js"></script>

CannyJS.canny method loads the image data from a given canvas, and returns the resulting image data as a GrayImageData object. To show the resulting image, just call its drawOn(canvas) method.

// get target canvas element
mycanvas = document.getElementById("myCanvas");
// perform edge detection
imageData = CannyJS.canny(canvas);
// overwrites the original canvas 


You can give some optional parameters to CannyJS.canny method:

	CannyJS.canny(canvas, [ht=100], [lt=50], [sigmma=1.4], [kernelSize=5])

ht and lt represent high and low threshold values that will be used in hysteresis thresholding procedure. Both sigmma and kernalSize are parameters used in Gaussian blur process (note that kernelSize must be an odd number).

Other APIs

You can also call methods that perform each step of Canny edge detection: gaussian blur, sobel filtering, non-maximum suppression and hysteresis thresholding. Since these methods all receive and return GrayImageData objects, you first need to build an instance and make it load image data:

	var canvas = document.getElementById("myCanvas");
	// construct a new GrayImageData object
	var imageData = new GrayImageData(canvas.width, canvas.height)
	// load image data from canvas

Available methods are as follows:

	// apply Gaussian filter 
	CannyJS.gaussianBlur(imageData, [sigmma=1.4], [kernelSize=5])
	// apply sobel filter
	// apply non-Maximum suppression
	// apply hysteresis thresholding
	CannyJS.hysteresis(nms, [ht=100], [lt=50])


From what I tested CannyJS takes 3-4 seconds to perform edge-detection on an image with size 600x400 (tested on Chrome 38 on MacBookAir). Because I wrote this library in CoffeeScript I have difficulties in optimizing the generated code for better performance. Any suggestion or fix will be appreciated (perhaps I better rewrite it in native JavaScript?).


MIT License.