What this visualizer does
Canny combines smoothing, gradients, non-maximum suppression, and hysteresis thresholding.
OpenCV visualizer
Image Filters & Edge Detection Visualizer
Explore grayscale, smoothing, image gradients, and Canny edges directly in your browser with OpenCV.js.
Controls
Image workspace
Loading OpenCV.js
What OpenCV computes
Detect thin edges with paired thresholds.
- Reads browser pixels into an OpenCV matrix.
- Applies the selected operation with live parameters.
- Renders the resulting matrix back to a canvas.
Common use cases
- Contour input
- Lane detection
- Object boundaries
gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
edges = cv2.Canny(gray, 80, 160, apertureSize=3)Controls and output
The result is a one-channel binary-like map of connected, thin edges.
- Change one parameter and compare both canvases.
- Use Reset to return to the Canny starter setup.
FAQ
For stable edges, reduce noise before gradient detection. Canny performs its own Gaussian smoothing, while Sobel and Laplacian expose raw gradient behavior.