Detect and highlight edges using Sobel, Canny, and other algorithms. Features threshold control, direction filters, and contour extraction.
Detect and highlight edges in images using algorithms like Sobel and Canny. Edge detection isolates boundaries and contours, which is useful for computer vision tasks, artistic line-drawing effects, or analyzing structural details in photographs.
Initializing in your browser…
Convert images to Base64 encoded strings for embedding in CSS, HTML, or JavaScript. Multiple output formats available.
Compare two images pixel-by-pixel. Multiple comparison modes: side-by-side, overlay, difference highlighting, onion skin, and slider. Perfect for visual regression testing.
Crop and trim images with precision visual selection. Features aspect ratio presets (1:1, 16:9, 4:3), free-form cropping, grid overlays, and pixel-perfect adjustments for professional results.
You want a line-art version of a photo to use as a colouring-page or trace guide.
Input
portrait.jpg · Sobel · threshold medium
Output
A black-on-white edge map outlining the major contours
Edge detection highlights where brightness changes sharply, which corresponds to object outlines, the basis of line art and a preprocessing step for tracing. The threshold controls how much fine texture survives.
Detect and highlight edges in images using algorithms like Sobel and Canny. Edge detection isolates boundaries and contours, which is useful for computer vision tasks, artistic line-drawing effects, or analyzing structural details in photographs.
Extract clean line drawings from photographs for tracing, coloring, or artistic use.
Prepare images for object detection pipelines by isolating structural edges.
Highlight structural lines in building or engineering photographs.
Pick the Pencil Sketch preset (Sobel, threshold 40, Black on White): the inverted edge map gives dark contour lines on a white ground, downloaded as a lossless PNG.
Choose the Neon Glow preset (threshold 50, Glow mode) and a glow color like cyan #00ffff; the tool tints the edges and adds a blur(2px) screen-blended bloom for a glowing outline.
Under the hood every detection runs the same engine: detectEdges() in the canvas processor draws your image to an offscreen HTML canvas at its natural pixel dimensions, converts it to grayscale with the Rec.601 luma weights (0.299R + 0.587G + 0.114B), then convolves it with the two classic 3x3 Sobel kernels - sobelX = [-1,0,1,-2,0,2,-1,0,1] for horizontal gradients and sobelY = [-1,-2,-1,0,0,0,1,2,1] for vertical. For each interior pixel it computes the gradient magnitude sqrt(gx*gx + gy*gy) and applies a single hard threshold: magnitude > threshold becomes pure white (255), everything else pure black (0). The Detection Threshold slider drives this directly, ranging from 10 to 150 in steps of 5 - lower values (the Subtle Details preset uses 25) keep faint texture and noise, higher values (Clean Outline uses 70) keep only the strongest contours. Be honest about one thing the four algorithm buttons imply: in this build the math is Sobel for all of them. Selecting Prewitt, Laplacian, or Canny-style changes the on-screen label and the downloaded filename suffix (yourimage-edges-canny.png) but the pixel computation is identical Sobel gradient + single threshold - there is no Gaussian pre-blur, no non-maximum suppression, and no hysteresis, so it is not a true multi-stage Canny pipeline.
Where this tool actually earns its keep is the five Output Modes, all rendered in the React component on a second canvas after the base edge map is produced. White on Black is the raw Sobel result. Black on White inverts each channel (255 - edge) for a pencil-sketch look on paper. Colored Edges redraws the original photo and zeroes the alpha wherever the edge value is below 0.1, so only the original colors that sit on detected contours survive. Overlay composites the edges over the untouched photo using the 'screen' blend mode at an Overlay Opacity you set from 10 to 100 percent. Glow paints a black background, tints the edges with one of six neon hex colors (cyan #00ffff, magenta, green, orange, blue, white), then re-draws a blur(2px) copy in 'screen' mode to fake a bloom - that blur and screen compositing is what produces the neon halo. These modes are the real creative range; the threshold and output mode are the two controls that genuinely change your result.
Six presets bundle a threshold and output mode into one click: Pencil Sketch (threshold 40, black-on-white), Blueprint (60, white-on-black), Neon Glow (50, glow), Clean Outline (70, white-on-black), Subtle Details (25, overlay), and Artistic (45, colored edges). Everything runs locally in the browser canvas - the file never leaves your machine - and output is always written as a lossless PNG via canvas.toBlob, with an Eye toggle to flip between the edge result and the original for comparison. A practical caveat that follows from the algorithm: because there is no blur stage before the Sobel pass, JPEG compression blocks and sensor noise get detected as edges too, so on a noisy or heavily-compressed photo raise the threshold (try the 80-120 quick-set chips) to suppress that speckle rather than expecting clean contours at the default 50.
Sobel is simpler and faster, detecting edges by computing intensity gradients. Canny is more sophisticated, it uses non-maximum suppression and hysteresis thresholding to produce cleaner, thinner edges with fewer false positives.
Yes. The threshold slider controls sensitivity. Lower thresholds detect more edges (including subtle ones), while higher thresholds only capture strong boundaries.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.