Class CanvasRegion

center

• get center(): Point

  Get center of region

  Returns Point

context

• get context(): CanvasRenderingContext2D

  Gets the drawing context

  Returns CanvasRenderingContext2D

dimensionMin

• get dimensionMin(): number

  Gets the width/height, whichever is smaller

  Returns number

height

• get height(): number

  Gets the height

  Returns number

region

• get region(): RectPositioned

  Gets the region

  Returns RectPositioned
• set region(value: RectPositioned): void

  SEts the region

  Parameters

  • value: RectPositioned

  Returns void

width

• get width(): number

  Gets the width

  Returns number

x

• get x(): number

  Gets the x offset

  Returns number

y

• get y(): number

  Gets they y offset

  Returns number

constructor

• new CanvasRegion(
      source: CanvasSource,
      regionCompute: (parent: CanvasSource) => RectPositioned,
  ): CanvasRegion

  Creates, using coordinate in canvas coordinates

  Parameters

  • source: CanvasSource
  • regionCompute: (parent: CanvasSource) => RectPositioned

  Returns CanvasRegion

absToRegionPoint

• absToRegionPoint(
      pt: Point,
      source: "screen",
      clamped: boolean,
  ): { x: number; y: number }

  Converts absolute to region point

  Parameters

  • pt: Point
  • source: "screen"
  • clamped: boolean

  Returns { x: number; y: number }

applyRegionOffset

• applyRegionOffset(p: Point): { x: number; y: number }

  Returns a copy of p offset by the region's x & y

  Parameters

  • p: Point

  Returns { x: number; y: number }

clear

• clear(): void

  Clears the region

  Returns void

drawBounds

• drawBounds(strokeStyle: string, lineWidth?: number): void

  For debugging, draws an outline of the bounds

  Parameters

  • strokeStyle: string
  • lineWidth: number = 1

  Returns void

drawCircles

• drawCircles(
      relativeCircles: CirclePositioned[],
      fillStyle: string,
      strokeStyle?: string,
      lineWidth?: number,
  ): void

  Parameters

  • relativeCircles: CirclePositioned[]
  • fillStyle: string
  • strokeStyle: string = ...
  • lineWidth: number = 1

  Returns void

drawConnectedPoints

• drawConnectedPoints(
      points: Point[],
      strokeStyle: string,
      lineWidth?: number,
  ): void

  Draws connected points in absolute coordinates, however with 0,0 being the top-left of the region.

  Thus, this will apply the region offset before drawing.

  Parameters

  • points: Point[]

    Points to draw
  • strokeStyle: string

    Stroke style
  • lineWidth: number = 1

    Line width

  Returns void

drawConnectedPointsRelative

• drawConnectedPointsRelative(
      relativePoints: Point[],
      strokeStyle: string,
      lineWidth?: number,
  ): void

  Draws a line from a series of points. Assumes region-relative, % coordinates (ie 0..1 scale)

  Parameters

  • relativePoints: Point[]

    Points to connect, in region-relative coordinates
  • strokeStyle: string

    Stroke style
  • lineWidth: number = 1

    Line with

  Returns void

fill

• fill(fillStyle?: string): void

  Fills the region

  Parameters

  • fillStyle: string = ...

  Returns void

fillText

• fillText(
      text: string,
      point: Point,
      fillStyle?: string,
      font: string,
      baseline?: CanvasTextBaseline,
      align?: CanvasTextAlign,
  ): void

  Fills text at a region-relative position

  Parameters

  • text: string
  • point: Point

    Region relative, meaning 0,0 is top-left of region
  • fillStyle: string = ...
  • font: string
  • baseline: CanvasTextBaseline = ...
  • align: CanvasTextAlign = ...

  Returns void

fillTextRelative

• fillTextRelative(
      text: string,
      relPos: Point,
      fillStyle?: string,
      font: string,
      baseline?: CanvasTextBaseline,
      align?: CanvasTextAlign,
  ): void

  Fills text at a relative position

  Parameters

  • text: string
  • relPos: Point

    Relative, meaning 0.5,0.5 is the middle of the region
  • fillStyle: string = ...
  • font: string
  • baseline: CanvasTextBaseline = ...
  • align: CanvasTextAlign = ...

  Returns void

recomputeRegion

• recomputeRegion(): void

  Calls the original regionCompute function passed in to the constructor to recompute the absolute region

  Returns void

toAbsRegion

• toAbsRegion(regionRel: Point, scaleBy?: "both"): { x: number; y: number }

  Converts a region-relative point (0..1) to an absolute point, which uses region-relative coordinates.

  Eg if the region had an x,y of 100,100, toAbsRegion({x:0,y:0}) will return 0,0.

  Parameters

  • regionRel: Point
  • scaleBy: "both" = ...

  Returns { x: number; y: number }

toRelPoint

• toRelPoint(
      pt: Point,
      source?: "source" | "screen",
      kind?: "independent",
      clamped?: boolean,
  ): { x: number; y: number }

  Converts a point to a region-relative one.

  Parameters

  • pt: Point
  • source: "source" | "screen" = ...
  • kind: "independent" = ...
  • clamped: boolean = true

  Returns { x: number; y: number }

source