To convert a polyline of a given thickness to a polygon:

• Get the line perpendicular to the polyline being rendered
• Create the quad with that by projecting the left and right sides
• When one line segment meets another repair the coordinates so they meet properly

This repair process is called "mitering" or a "join type."

Sometimes the edges are repaired in a way that confers a particular artistic style. Here are some example styles:

Miter: vertices are projected from both line segments until they intersect. The most basic, but sharp turns make very pointy edges. Cheap. Looks fine as long as the geometry does.

Bevels: corners clipped at half angle; sharp turns will have a flat top to their obtuse side.

Round: For polylines with few points that need to look nice; makes it so sharp turns in the line still have smooth elbows.

I suspect rounded caps involve either doing smooth subdivision on sharp angles in the polyline; maybe there is a cheaper way?

SVG also supports some bizzare ones now (SVG 2+) called "Arc."

Mitering a standard polyline

There is a better way for mitering a bezier, keep in mind.

a, b <- lines being mitered
tangent <- |a + b|
miter <- (-tangent.y, tangent.x)
temp <- (-a.y, a.x)
miter length <- (thickness * 0.5) / dot(miter, temp)

Mitering a bezier

TODO Ciechanowski has the math for it; relies on derivatives and painful calculus

Perpendicular directions in 2D

Flip two coordinates and negate one of them.

direction <- (x, y)
perpendicular <- (-y, x)

Unit direction of two lines

direction <- |a - b|

• Ciechanowski's "Revolved" app disclosure
• mattdesl's polyline-miter-util
• Acegikmo