Canny edge detection — computer vision in the browser

Canny edge detection is a classic computer-vision algorithm (OpenCV’s cv2.Canny) that finds object outlines by looking for sharp changes in brightness. It uses two thresholds — a high one to start an edge and a low one to keep following it (hysteresis) — so the edges come out clean and connected. Edit the thresholds below and run it live in your browser.

Canny edge detection — example output

Example code (Python / OpenCV)

import cv2
import numpy as np

# Build a simple scene (no upload needed) and find its edges
img = np.zeros((300, 400, 3), dtype=np.uint8)
cv2.rectangle(img, (60, 60), (200, 240), (200, 200, 200), -1)
cv2.circle(img, (300, 150), 70, (255, 255, 255), -1)
cv2.imshow("input", img)

gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
edges = cv2.Canny(gray, 100, 200)   # low / high hysteresis thresholds
cv2.imshow("canny edges", edges)

print("Canny edges from a low/high threshold pair. Tweak 100/200 and re-run.")

More computer-vision techniques →