utils

import {...} from "@canvas-commons/2d/lib/utils";

Classes

• PathDataBuilder

Functions

adjustRectRadius

public adjustRectRadiusradius: numberhorizontal: numbervertical: numberrect: BBox: number

Parameters

• radius: number
• horizontal: number
• vertical: number
• rect: BBox

---

arc

public arccontext: CanvasRenderingContext2DPath2Dcenter: Vector2radius: numberstartAngle: number = 0endAngle: number = ...counterclockwise: boolean = false: void

Parameters

• context: CanvasRenderingContext2DPath2D
• center: Vector2
• radius: number
• startAngle: number = 0
• endAngle: number = ...
• counterclockwise: boolean = false

---

arcTo

public arcTocontext: CanvasRenderingContext2DPath2Dthrough: Vector2position: Vector2radius: number: void

Parameters

• context: CanvasRenderingContext2DPath2D
• through: Vector2
• position: Vector2
• radius: number

---

bezierCurveTo

public bezierCurveTocontext: CanvasRenderingContext2DPath2DcontrolPoint1: Vector2controlPoint2: Vector2to: Vector2: void

Parameters

• context: CanvasRenderingContext2DPath2D
• controlPoint1: Vector2
• controlPoint2: Vector2
• to: Vector2

---

canvasStyleParser

public canvasStyleParserstyle: PossibleCanvasStyle: ColorGradientPatternnull

Parameters

• style: PossibleCanvasStyle

---

createRoughConfig

public createRoughConfigroughness: numberbowing: numberfillStyle: RoughFillStylefillWeight: numberundefinedhachureAngle: numberhachureGap: numberseed: numberdisableMultiStroke: booleandisableMultiStrokeFill: boolean: PartialRoughConfig

Helper to create rough config from individual signals.

Parameters

• roughness: number

  Roughness value

• bowing: number

  Bowing value

• fillStyle: RoughFillStyle

  Fill style

• fillWeight: numberundefined

  Fill weight

• hachureAngle: number

  Hachure angle

• hachureGap: number

  Hachure gap

• seed: number

  Random seed (always defined, generated from useRandom if not specified)

• disableMultiStroke: boolean

  Disable multiple strokes for stroke

• disableMultiStrokeFill: boolean

  Disable multiple strokes for fill

---

drawImage

public drawImagecontext: CanvasRenderingContext2Dimage: CanvasImageSourcedestination: BBox: void

public drawImagecontext: CanvasRenderingContext2Dimage: CanvasImageSourcesource: BBoxdestination: BBox: void

Parameters

• context: CanvasRenderingContext2D
• image: CanvasImageSource
• destination: BBox

---

drawLine

public drawLinecontext: CanvasRenderingContext2DPath2Dpoints: Vector2[]: void

Parameters

• context: CanvasRenderingContext2DPath2D
• points: Vector2[]

---

drawPivot

public drawPivotcontext: CanvasRenderingContext2DPath2Doffset: Vector2radius: number = 8: void

Parameters

• context: CanvasRenderingContext2DPath2D
• offset: Vector2
• radius: number = 8

---

drawPolygon

public drawPolygonpath: CanvasRenderingContext2DPath2Drect: BBoxsides: number: void

Parameters

• path: CanvasRenderingContext2DPath2D
• rect: BBox
• sides: number

---

drawRect

public drawRectcontext: CanvasRenderingContext2DPath2Drect: BBox: void

Parameters

• context: CanvasRenderingContext2DPath2D
• rect: BBox

---

drawRoughCircle

public drawRoughCirclecontext: CanvasRenderingContext2Dcenter: Vector2size: Vector2config: PartialRoughConfigfill: PossibleCanvasStylestroke: PossibleCanvasStylestrokeWidth: number: void

Draw a rough circle/ellipse.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• center: Vector2

  Center point of the circle

• size: Vector2

  Size (width and height) of the ellipse

• config: PartialRoughConfig

  Rough configuration

• fill: PossibleCanvasStyle

  Fill style

• stroke: PossibleCanvasStyle

  Stroke style

• strokeWidth: number

  Line width

---

drawRoughDrawable

public drawRoughDrawablecontext: CanvasRenderingContext2Ddrawable: Drawable: void

Draw a cached rough drawable.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• drawable: Drawable

  The cached drawable to render

---

drawRoughPath

public drawRoughPathcontext: CanvasRenderingContext2DpathData: stringconfig: PartialRoughConfigfill: PossibleCanvasStylestroke: PossibleCanvasStylestrokeWidth: number: void

Draw a rough path from SVG path data.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• pathData: string

  SVG path string

• config: PartialRoughConfig

  Rough configuration

• fill: PossibleCanvasStyle

  Fill style

• stroke: PossibleCanvasStyle

  Stroke style

• strokeWidth: number

  Line width

---

drawRoughRect

public drawRoughRectcontext: CanvasRenderingContext2Dbox: BBoxconfig: PartialRoughConfigfill: PossibleCanvasStylestroke: PossibleCanvasStylestrokeWidth: number: void

Draw a rough rectangle.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• box: BBox

  The bounding box of the rectangle

• config: PartialRoughConfig

  Rough configuration

• fill: PossibleCanvasStyle

  Fill style

• stroke: PossibleCanvasStyle

  Stroke style

• strokeWidth: number

  Line width

---

drawRoughRoundedRect

public drawRoughRoundedRectcontext: CanvasRenderingContext2Dbox: BBoxradius: SpacingsmoothCorners: booleancornerSharpness: numberconfig: PartialRoughConfigfill: PossibleCanvasStylestroke: PossibleCanvasStylestrokeWidth: number: void

Draw a rough rounded rectangle.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• box: BBox

  The bounding box of the rectangle

• radius: Spacing

  Corner radius values

• smoothCorners: boolean

  Whether to use smooth corners

• cornerSharpness: number

  Sharpness of smooth corners

• config: PartialRoughConfig

  Rough configuration

• fill: PossibleCanvasStyle

  Fill style

• stroke: PossibleCanvasStyle

  Stroke style

• strokeWidth: number

  Line width

---

drawRoundRect

public drawRoundRectcontext: CanvasRenderingContext2DPath2Drect: BBoxradius: SpacingsmoothCorners: booleancornerSharpness: number: void

Parameters

• context: CanvasRenderingContext2DPath2D
• rect: BBox
• radius: Spacing
• smoothCorners: boolean
• cornerSharpness: number

---

fillRect

public fillRectcontext: CanvasRenderingContext2Drect: BBox: void

Parameters

• context: CanvasRenderingContext2D
• rect: BBox

---

generateRoughPath

public generateRoughPathcontext: CanvasRenderingContext2DpathData: stringconfig: PartialRoughConfigfill: PossibleCanvasStylestroke: PossibleCanvasStylestrokeWidth: number: Drawable

Generate a rough path drawable from SVG path data.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• pathData: string

  SVG path string

• config: PartialRoughConfig

  Rough configuration

• fill: PossibleCanvasStyle

  Fill style

• stroke: PossibleCanvasStyle

  Stroke style

• strokeWidth: number

  Line width

---

generateRoughRect

public generateRoughRectcontext: CanvasRenderingContext2Dbox: BBoxconfig: PartialRoughConfigfill: PossibleCanvasStylestroke: PossibleCanvasStylestrokeWidth: number: Drawable

Generate a rough rectangle drawable.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• box: BBox

  The bounding box of the rectangle

• config: PartialRoughConfig

  Rough configuration

• fill: PossibleCanvasStyle

  Fill style

• stroke: PossibleCanvasStyle

  Stroke style

• strokeWidth: number

  Line width

---

generateRoughRoundedRect

public generateRoughRoundedRectcontext: CanvasRenderingContext2Dbox: BBoxradius: SpacingsmoothCorners: booleancornerSharpness: numberconfig: PartialRoughConfigfill: PossibleCanvasStylestroke: PossibleCanvasStylestrokeWidth: number: Drawable

Generate a rough rounded rectangle drawable.

Parameters

• context: CanvasRenderingContext2D

  The 2D rendering context

• box: BBox

  The bounding box of the rectangle

• radius: Spacing

  Corner radius values

• smoothCorners: boolean

  Whether to use smooth corners

• cornerSharpness: number

  Sharpness of smooth corners

• config: PartialRoughConfig

  Rough configuration

• fill: PossibleCanvasStyle

  Fill style

• stroke: PossibleCanvasStyle

  Stroke style

• strokeWidth: number

  Line width

---

is

public isklass: (): object: any => object is T

Create a predicate that checks if the given object is an instance of the given class.

Parameters

• klass: ()

  The class to check against.

---

lineTo

public lineTocontext: CanvasRenderingContext2DPath2Dposition: Vector2: void

Parameters

• context: CanvasRenderingContext2DPath2D
• position: Vector2

---

moveTo

public moveTocontext: CanvasRenderingContext2DPath2Dposition: Vector2: void

Parameters

• context: CanvasRenderingContext2DPath2D
• position: Vector2

---

quadraticCurveTo

public quadraticCurveTocontext: CanvasRenderingContext2DPath2DcontrolPoint: Vector2to: Vector2: void

Parameters

• context: CanvasRenderingContext2DPath2D
• controlPoint: Vector2
• to: Vector2

---

resolveCanvasStyle

public resolveCanvasStylestyle: CanvasStylecontext: CanvasRenderingContext2D: stringCanvasGradientCanvasPattern

Parameters

• style: CanvasStyle
• context: CanvasRenderingContext2D

---

roundedRectToSVGPath

public roundedRectToSVGPathbox: BBoxradius: SpacingsmoothCorners: booleancornerSharpness: number: string

Convert a rounded rectangle to SVG path data.

Parameters

• box: BBox

  The bounding box of the rectangle

• radius: Spacing

  Corner radius values

• smoothCorners: boolean

  Whether to use smooth corners (bezier curves)

• cornerSharpness: number

  Sharpness of smooth corners

---

strokeRect

public strokeRectcontext: CanvasRenderingContext2Drect: BBox: void

Parameters

• context: CanvasRenderingContext2D
• rect: BBox

---

withDefaults

public withDefaultscomponent: Tdefaults: PropsOfT: props: PropsOfT => Node

Create a higher order component with default props.

Examples

Parameters

• component: T

  The base class or function component to wrap.

• defaults: PropsOfT

  The default props to apply.