Skip to content
opencv-wasm

Contour tracing

Algorithm atlasSegmentation

Trace the boundary of each binary region as an ordered sequence of points.

Try it on your image ↓

VISUAL WALKTHROUGHSegmentation
REFERENCE INPUTShape with a concavity

The inward notch distinguishes the original boundary from its convex hull.

RESULTClosed contour

Record points and, when requested, parent-child contour relationships.

STEP 03 / 03

Record points and, when requested, parent-child contour relationships.

Illustrative example. The stages explain the method; they are not a live OpenCV execution.

Try it on an image

YOUR IMAGE · REAL OPENCV

Experiment at pixel level

Open full lab ↗

Draw outlines of white regions after thresholding.

The engine loads on your first run. Your images stay in this browser.

Input448 × 320
OutputWaiting for a result

Scroll over either image to zoom at the pointer. Use the scrollbars to pan both views over the same relative area. Zoom is relative to the input; pixel coordinates belong to each image. Warps can change scene correspondence.

Pixel inspector RGBA · native values · matched scale · 9 × 9 output pixels
Hover to inspect. Click to pin a pixel.
Input 
Select a pixel

Output 
Select a pixel

Sample models and licenses

When to use it

Measure outlines, distinguish holes, simplify shapes or draw boundaries.

How it works

  1. 01Locate an unvisited boundary pixel.
  2. 02Follow the region boundary in order.
  3. 03Record points and, when requested, parent-child contour relationships.

binary mask → ordered boundaries + hierarchy

What to tune

RETR_EXTERNAL keeps outer boundaries; RETR_TREE retains nesting. CHAIN_APPROX_SIMPLE removes redundant points on straight runs.

Where it breaks down

Contour area and foreground pixel count are different measurements. Retrieval and approximation choices change the output topology and point count.

TypeScript API

Open an entry for its exact overloads, parameter descriptions, result ownership and pinned upstream source.

findContoursReference →drawContoursReference →

All of these calls execute on the CPU. Native objects need explicit disposal. See matrices and ownership and build compatibility.

Global thresholding

Divide pixels using one intensity threshold, or choose it automatically with Otsu or the triangle method.

Adaptive thresholding

Compute a different intensity threshold for each local neighbourhood.

Connected components

Give every connected foreground region a distinct integer label.

Marker-based watershed

Grow labelled regions across an image until competing regions meet at boundaries.