← Back to Index

Canvas Transform Demo: Effects on Strokes

Understanding Transform Effects on Strokes

This demo shows how transforms have complex effects on not only paths, but also on the exact shape of the strokes related to those paths.

For example, in a stroke of a rectangle on which a "scale x" is applied, not only the rectangle is stretched, but also the strokes, so the vertical strokes become thicker than the horizontal ones. Similar effects happen with rotation and skewing.

These transformations affect how strokes are rendered and must be considered when implementing a software renderer that aims to match Canvas behavior precisely.

Try adjusting the transformation controls below to see the effects on different shapes and their strokes.

1.0
1.0
0.0
0.0
10