@mocanvas/editor · function
declare function getPerfectDashProps(length: number, strokeWidth: number, opts?: PerfectDashOptions): PerfectDashPropsA dash pattern that divides evenly into the length it has to cover.
The problem this solves: CSS stroke-dasharray is an absolute length, so a
pattern applied to an arbitrary path almost always ends mid-dash. On a
rectangle that shows up as a stub at one corner and a visible seam; on a
circle it is worse, because the seam moves as the shape is resized.
So the dash length is *derived* from the path: a target ratio is chosen, the number of whole dashes that fits is computed and rounded, and the dash and gap are stretched to make that count exact. The stroke then always ends on a whole dash.
strokeWidth is in the same units as length — page units on the canvas,
so a caller drawing at a fixed screen size passes 1 / zoom.
mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.