Six published edge operators (Sobel, Prewitt, Scharr, Roberts and both Laplacians) plus the real four-stage Canny, each checked against the browser's own feConvolveMatrix and each naming the paper it comes from.
Initializing in your browser…
Turn an image into a data URL whose payload is decoded again and compared byte for byte with the file, with the media type taken from the file's own signature rather than its extension and the size cost of embedding stated in full.
Compare two images with a perceptual engine (pixelmatch) that ignores anti-aliasing, or an exact byte engine. Groups changes into regions with bounding boxes, reports SSIM, and handles size mismatches with an explicit policy.
Whole-pixel crops with the rectangle typed or dragged, checked by decoding the output and comparing it with the pixels that went in. Quarter turns and mirrors are exact permutations, so nothing is clipped.
A 100 by 60 picture holding one vertical step from black to white, so the correct answer is a single line 60 pixels tall.
Input
step.png · Sobel gradient, and then Canny
What each one returns
Sobel |G| at the boundary 1020.0 (exactly 4 x 255, which is arithmetic) Sobel above 3 percent 116 pixels (the ridge is TWO wide) Canny, sigma 1, 3/10 58 pixels (one per interior row) feConvolveMatrix disagrees 1 of 255 across 31,284 pixels
A Sobel gradient across a full-scale step is exactly four times 255, so the operator can be checked against arithmetic rather than against a feeling. Thresholding it leaves a ridge two pixels wide; non-maximum suppression is the stage that makes it one, and it is the stage a tool that only thresholds does not have. The last line is the browser answering the same question through feConvolveMatrix, whose definition is published in Filter Effects Module 1.
Six published edge operators and the real four-stage Canny algorithm, each naming the paper it comes from and each checked against the browser's own feConvolveMatrix, which implements the same convolution from Filter Effects Module 1. Thresholds are given as a percentage of each operator's own full scale, so the same setting means the same thing whichever one you pick.
Extract line drawings from photographs for tracing or colouring, with the magnitude output keeping the strength of each contour.
See what actually separates Sobel, Prewitt, Scharr and Roberts on your own picture, with the same threshold scale under all four.
Produce a thinned, hysteresis-thresholded Canny map rather than a raw gradient, which is what a downstream contour follower expects.
Every kernel, every stage count and the browser's own answer are on the page, so the arithmetic can be followed rather than taken on trust.
Pencil Sketch preset: Sobel, gradient magnitude rather than binary, inverted to dark lines on white. The magnitude output keeps faint contours instead of dropping them at a threshold.
Canny with sigma 1.5, low 3 percent and high 12 percent. On the noise fixture that returns 88 edge pixels against a true edge 90 pixels tall, where a single Sobel threshold returns 3,559.
An edge operator is not a style. Every one of these has a definition in print, so "is this the operator it names" is a question with an answer. Six kernels are offered, each carrying its publication: Sobel (Duda and Hart, Pattern Classification and Scene Analysis, 1973, section 7.2), Prewitt (Object Enhancement and Extraction, in Picture Processing and Psychopictorics, 1970), Scharr (Optimale Operatoren in der Digitalen Bildverarbeitung, PhD thesis, 2000), the Roberts cross (Machine Perception of Three-Dimensional Solids, MIT, 1963), and the Laplacian in its five-point and nine-point discretisations, the operator Marr and Hildreth put on this footing in Theory of Edge Detection (Proc. R. Soc. Lond. B 207, 1980). The kernel in use is drawn on the page, cell by cell, so the arithmetic here is visibly the arithmetic in the paper.
The check is not another implementation, it is the specification. `feConvolveMatrix` is a filter primitive of Filter Effects Module 1 and every browser implements it, so the same kernel can be handed to the browser and the two answers compared. The specification requires the kernel rotated by 180 degrees and clamps its result to the range 0 to 1, so the page writes the rotated matrix, divides the signed range in half and biases it to the middle, which maps the full swing onto exactly 0 to 1 with nothing clipped. Across roughly 31,000 pixels the two agree to within ONE of 255, and that one byte is the 8-bit round trip through the filter output and nothing else. The verdict, the rotated matrix and the divisor are all printed beside the picture.
Canny is here as the algorithm it actually is, not as a name on a button. J. Canny, "A Computational Approach to Edge Detection" (IEEE PAMI 8(6), November 1986) is four stages: a Gaussian, the gradient, non-maximum suppression to thin every ridge to a single pixel, and hysteresis over a LOW and a HIGH threshold, so a weak pixel survives only when it is connected to a strong one. Each stage reports what it did. On a 100 by 60 picture holding one vertical step, Canny returns 58 edge pixels, about one per row, where the same gradient under a single threshold returns 116, because the unsuppressed ridge is two pixels wide. On a noisy step it is starker: the true edge is 90 pixels tall, Canny finds 88, and a single Sobel threshold on the same picture finds 3,559.
A threshold is given as a percentage of the operator's own full scale, which is the largest magnitude that kernel can produce on any 8-bit picture, and both numbers are shown. That matters because the operators are not on one scale: 10 percent is a magnitude of 144.2 for Sobel and 36.1 for the Roberts cross, so a single absolute threshold cannot serve them both, and a slider labelled 0 to 150 means six different things depending on which button is lit.
The grey conversion is a choice with three named answers, shared with the Image Histogram tool: ITU-R BT.709-6 item 3.2, which is the definition that belongs to sRGB, ITU-R BT.601-7 table 3, and CIE L* from IEC 61966-2-1 and CIE 15 clause 8.2.1.1. They are different numbers, not rounding: on the ColorChecker patches the Rec. 601 and Rec. 709 greys are up to 33 levels apart, and switching between them moves the edge count on those swatches from 3,899 to 3,669. The five presentation modes then run on top of whichever map you produced: white on black, black on white, colour kept only on the edges, a screen-blended overlay at an opacity you set, and a neon glow in one of six colours with a blurred copy lightened over the sharp one.
Output can be the binary map, which is what a threshold gives, or the gradient magnitude itself scaled to the largest value found, which keeps the strength of every edge instead of throwing it away. Everything runs at full resolution in the browser, the file never leaves the machine, and the download is a lossless PNG named after the operator that actually produced it.
Sobel is one convolution: it gives a gradient magnitude, and a threshold on that gives a ridge two pixels wide with no noise handling. Canny is four stages built on that gradient: a Gaussian first, then non-maximum suppression to thin each ridge to one pixel, then hysteresis over two thresholds so a weak pixel is kept only when it connects to a strong one. On a single 100 by 60 step, Canny returns 58 edge pixels and a threshold on the raw Sobel returns 116.
Scharr's weights are close to four times Sobel's, and the threshold is a percentage of each operator's own full scale, so on a hard-edged synthetic image the two threshold at the same places. They differ on noisy material and on edges away from the horizontal and vertical, which is what Scharr's rotational symmetry was designed for.
It is a second derivative. A constant slope has a constant first derivative and a zero second derivative, so a smooth ramp is invisible to it and only the two ends of the ramp show. On a pure linear ramp Sobel marks all 9,828 interior pixels and the Laplacian marks none.
The browser is asked the same question. feConvolveMatrix is a filter primitive of Filter Effects Module 1, so it is a second implementation of exactly this convolution sitting in the page. The same kernel is handed to it, rotated 180 degrees as the specification requires, and the two answers are compared pixel by pixel: at most 1 of 255 across 31,284 pixels, which is the 8-bit round trip through the filter output.
Rec. 709 unless you have a reason not to, because those are the coefficients that belong to sRGB. Rec. 601 if you are matching another tool that uses it. They are genuinely different: on the ColorChecker patches the two greys are up to 33 levels apart, which moves the edge count by several percent.
Yes, and the threshold is stated twice: as a percentage of the operator's full scale and as the absolute magnitude that percentage comes to. Ten percent is 144.2 for Sobel and 36.1 for the Roberts cross, so a percentage is the only number that means the same thing under every operator.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.