Feature GeoJS - Current Leaflet Mapbox GL GeoJS 0.10.5 GeoJS - Current
WebGL Canvas 2D SVG Canvas 2D SVG WebGL SVG Debug WebGL
Basic Lines

Lines with default options for each rendering method.

Varying Color

Lines that vary by color from vertex to vertex, cycling through yellow, black, and red.

On corners, the vertex color is at the far end of the miter. There will probably always be a clear color step along the miter line.

Varying Opacity

Lines that vary by opacity from vertex to vertex, cycling between 0.5 and 1.

Varying Width

Lines that vary by width from vertex to vertex, alternating between 6 and 12 pixels.

On corners, the width is virtually at the far end of the miter.

Stroke Offset

Lines can be offset to one side or the other of center. This can very from vertex to vertex, but is only shown offset all the way to the left here.

Offset ranges from -1 (left) to +1 (right) along the direction of the stroke. 0 (default) is centered.

Round Line Cap

End caps can be 'butt' (default), 'round', or 'square'.

In GeoJS's WebGL renderer, the end caps can vary by vertex (not shown).

Square Line Cap

End caps can be 'butt' (default), 'round', or 'square'.

Bevel Line Join

Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.

In GeoJS's WebGL renderer, the joins can vary by vertex (not shown).

Round Line Join

Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.

Miter-clip Line Join

Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.

The miter-clip line join is part of a proposed path standard. If the join exceeds the miter limit, it is beveled at that distance rather than right at the join.

Miter Limit

Use a miter limit of 4. Other examples use a miter limit of 10 (except the miter-clip line join).

Leaflet doesn't expose miter limit directly, but if SVG is used, the paths can be modified to change the miter limit.

Antialiasing of 0

Antialiasing affects how the edges of lines are smoothed. A value of 1 or 2 produces smooth results, 0 hard results, and large values generate a blurred outline.

Antialiasing of 1/2 the line width

Antialiasing affects how the edges of lines are smoothed. A value of 1 or 2 produces smooth results, 0 hard results, and large values generate a blurred outline.

Thin Lines

Comparison of a line width of 0.25 pixels. The reference lines are hidden.

10,000 Line Segments

A modest number of line segments from a real-world sample.

Compare line drawing between libraries, versions, and rendering methods
GeoJS - Current - WebGL
GeoJS - Current - Canvas
GeoJS - Current - SVG
Leaflet - 1.0.2 - Canvas
Leaflet - 1.0.2 - SVG
Mapbox GL - 0.28.0 - WebGL
GeoJS - 0.10.5 - WebGL
GeoJS - 0.10.5 - SVG
GeoJS - Current - Debug WebGL