Skip to main content

utils

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

Classes​

Functions​

adjustRectRadius​

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

Parameters

arc​

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

Parameters

arcTo​

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

Parameters

bezierCurveTo​

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

Parameters

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

drawImage​

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

Parameters

drawLine​

public drawLinecontext: CanvasRenderingContext2DPath2Dpoints: Vector2[]: void

Parameters

drawPivot​

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

Parameters

drawPolygon​

public drawPolygonpath: CanvasRenderingContext2DPath2Drect: BBoxsides: number: void

Parameters

drawRect​

public drawRectcontext: CanvasRenderingContext2DPath2Drect: BBox: void

Parameters

drawRoughCircle​

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

Draw a rough circle/ellipse.

Parameters

drawRoughDrawable​

public drawRoughDrawablecontext: CanvasRenderingContext2Ddrawable: Drawable: void

Draw a cached rough drawable.

Parameters

drawRoughPath​

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

Draw a rough path from SVG path data.

Parameters

drawRoughRect​

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

Draw a rough rectangle.

Parameters

drawRoughRoundedRect​

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

Draw a rough rounded rectangle.

Parameters

drawRoundRect​

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

Parameters

fillRect​

public fillRectcontext: CanvasRenderingContext2Drect: BBox: void

Parameters

fontsVersion​

public fontsVersion(): number

Reactive token for web font availability.

Canvas text measurement silently falls back to a substitute font until the requested face finishes loading, and nothing in the signal graph observes that load. Measurement computeds read this signal so a finished font load invalidates their cached results.

generateRoughPath​

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

Generate a rough path drawable from SVG path data.

Parameters

generateRoughRect​

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

Generate a rough rectangle drawable.

Parameters

generateRoughRoundedRect​

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

Generate a rough rounded rectangle drawable.

Parameters

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

moveTo​

public moveTocontext: CanvasRenderingContext2DPath2Dposition: Vector2: void

Parameters

quadraticCurveTo​

public quadraticCurveTocontext: CanvasRenderingContext2DPath2DcontrolPoint: Vector2to: Vector2: void

Parameters

requestFontLoad​

public requestFontLoadfont: string: void

Kick off loading for a canvas font shorthand (e.g. '700 160px Inter').

Setting ctx.font does not trigger a web font fetch on its own. Each font a text node measures with is requested here; when the load lands, fontsVersion bumps and dependents re-measure with real metrics. A pending load is collected like any other asynchronous resource, so the scene waits for it before drawing. Failed loads keep the fallback metrics.

Parameters

resolveCanvasStyle​

public resolveCanvasStylestyle: CanvasStylecontext: CanvasRenderingContext2D: stringCanvasGradientCanvasPattern

Parameters

roundedRectToSVGPath​

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

Convert a rounded rectangle to SVG path data.

Parameters

strokeRect​

public strokeRectcontext: CanvasRenderingContext2Drect: BBox: void

Parameters

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.