Options
All
  • Public
  • Public/Protected
  • All
Menu

Class CanvasForm

CanvasForm is an implementation of abstract class VisualForm. It provide methods to express Pts on CanvasSpace. You may extend CanvasForm to implement your own expressions for CanvasSpace.

Hierarchy

Index

Constructors

constructor

  • Create a new CanvasForm. You may also use space.getForm() to get the default form.

    Parameters

    Returns CanvasForm

Properties

Protected _ctx

_ctx: CanvasRenderingContext2D

Protected _estimateTextWidth

_estimateTextWidth: function

Type declaration

    • (string: any): number
    • Parameters

      • string: any

      Returns number

Protected _filled

_filled: boolean = true

Protected _font

_font: Font = new Font( 14, "sans-serif")

Protected _ready

_ready: boolean = false

Protected _space

_space: CanvasSpace

Protected _stroked

_stroked: boolean = true

Accessors

currentFont

  • get currentFont(): Font

filled

  • get filled(): boolean
  • set filled(b: boolean): void

ready

  • get ready(): boolean
  • get whether the Form has received the Space's rendering context

    Returns boolean

space

stroked

  • get stroked(): boolean
  • set stroked(b: boolean): void

Methods

Protected _multiple

  • _multiple(groups: GroupLike[], shape: string, ...rest: any[]): this

Protected _paint

  • _paint(): void

Protected _textAlign

  • Align text within a rectangle box

    Parameters

    • box: GroupLike

      a Group that defines a rectangular box

    • vertical: string

      a string that specifies the vertical alignment in the box: "top", "bottom", "middle", "start", "end"

    • Optional offset: PtLike

      Optional offset from the edge (like padding)

    • Optional center: Pt

      Optional center position

    Returns Pt

Protected _textTruncate

  • _textTruncate(str: string, width: number, tail?: string): [string, number]
  • Truncate text to fit width

    Parameters

    • str: string

      text to truncate

    • width: number

      width to fit

    • Default value tail: string = ""

      text to indicate overflow such as "...". Default is empty "".

    Returns [string, number]

alignText

  • alignText(alignment?: string, baseline?: string): this
  • Set text alignment and baseline (eg, vertical-align)

    Parameters

    • Default value alignment: string = "left"

      Canvas' textAlign option: "left", "right", "center", "start", or "end"

    • Default value baseline: string = "alphabetic"

      Canvas' textBaseline option: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom". For convenience, you can also use "center" (same as "middle"), and "baseline" (same as "alphabetic")

    Returns this

arc

  • arc(pt: PtLike, radius: number, startAngle: number, endAngle: number, cc?: boolean): this
  • Draw an arc.

    Parameters

    • pt: PtLike

      center position

    • radius: number

      radius of the arc circle

    • startAngle: number

      start angle of the arc

    • endAngle: number

      end angle of the arc

    • Optional cc: boolean

      an optional boolean value to specify if it should be drawn clockwise (false) or counter-clockwise (true). Default is clockwise.

    Returns this

circle

circles

fill

  • fill(c: string | boolean): this
  • Set current fill style. Provide a valid color string or false to specify no fill color.

    example

    form.fill("#F90"), form.fill("rgba(0,0,0,.5"), form.fill(false)

    Parameters

    • c: string | boolean

      fill color which can be as color, gradient, or pattern. (See canvas documentation)

    Returns this

fillOnly

  • fillOnly(c: string | boolean): this
  • Set current fill style and without stroke.

    example

    form.fillOnly("#F90"), form.fillOnly("rgba(0,0,0,.5")

    Parameters

    • c: string | boolean

      fill color which can be as color, gradient, or pattern. (See canvas documentation)

    Returns this

font

  • font(sizeOrFont: number | Font, weight?: string, style?: string, lineHeight?: number, family?: string): this
  • Set the current font

    example

    form.font( myFont ), form.font(14, "bold")

    Parameters

    • sizeOrFont: number | Font

      either a number to specify font-size, or a Font object to specify all font properties

    • Optional weight: string

      Optional font-weight string such as "bold"

    • Optional style: string

      Optional font-style string such as "italic"

    • Optional lineHeight: number

      Optional line-height number suchas 1.5

    • Optional family: string

      Optional font-family such as "Helvetica, sans-serif"

    Returns this

fontWidthEstimate

  • fontWidthEstimate(estimate?: boolean): this
  • Set whether to use ctx.measureText or a faster but less accurate heuristic function.

    Parameters

    • Default value estimate: boolean = true

      true to use heuristic function, or false to use ctx.measureText

    Returns this

getTextWidth

  • getTextWidth(c: string): number
  • Get the width of this text. It will return an actual measurement or an estimate based on fontWidthEstimate setting. Default is an actual measurement using canvas context's measureText.

    Parameters

    • c: string

      a string of text contents

    Returns number

image

  • Draw an image

    Parameters

    • img: ImageBitmap

      an image source (eg the image from <img>, <video> or <canvas>)

    • target: PtLike | GroupLike

      a target area to place the image. Either a Pt specifying a position, or a Group that specifies a bounding box (top-left position, bottom-right position). Default is (0,0) at top-left.

    • Optional original: GroupLike

    Returns this

line

  • Draw a line or polyline

    Parameters

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    Returns this

lines

log

  • log(txt: any): this
  • A convenient way to draw some text on canvas for logging or debugging. It'll be draw on the top-left of the canvas as an overlay.

    Parameters

    • txt: any

      text

    Returns this

paragraphBox

  • paragraphBox(box: GroupLike, txt: string, lineHeight?: number, verticalAlign?: string, crop?: boolean): this
  • Fit multi-line text in a rectangular box. Note that this will also set canvas context's textBaseline to "top".

    Parameters

    • box: GroupLike

      a rectangle box defined by a Group

    • txt: string

      string of text

    • Default value lineHeight: number = 1.2

      line height as a ratio of font size. Default is 1.2.

    • Default value verticalAlign: string = "top"

      "top", "middle", or "bottom" to specify vertical alignment inside the box

    • Default value crop: boolean = true

      a boolean to specify whether to crop text when overflowing

    Returns this

point

  • point(p: PtLike, radius?: number, shape?: string): this
  • Draws a point

    example

    form.point( p ), form.point( p, 10, "circle" )

    Parameters

    • p: PtLike

      a Pt object

    • Default value radius: number = 5

      radius of the point. Default is 5.

    • Default value shape: string = "square"

      The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.

    Returns this

points

  • points(pts: GroupLike | number[][], radius: number, shape: string): this
  • Draw multiple points at once

    Parameters

    • pts: GroupLike | number[][]

      an array of Pt or an array of number arrays

    • radius: number

      radius of the point. Default is 5.

    • shape: string

      The shape of the point. Defaults to "square", but it can be "circle" or a custom shape function in your own implementation.

    Returns this

polygon

polygons

rect

  • rect(pts: number[][] | Pt[]): this
  • Draw a rectangle

    Parameters

    • pts: number[][] | Pt[]

      usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.

    Returns this

rects

renderOffscreen

  • renderOffscreen(offset?: PtLike): void
  • Render the offscreen canvas's content on the visible canvas

    Parameters

    • Default value offset: PtLike = [0,0]

      Optional offset on the top-left position when drawing on the visible canvas

    Returns void

reset

  • reset(): this
  • Reset the rendering context's common styles to this form's styles. This supports using multiple forms on the same canvas context.

    Returns this

square

  • square(pt: PtLike, halfsize: number): this
  • Draw a square, given a center and its half-size

    Parameters

    • pt: PtLike

      center Pt

    • halfsize: number

      half-size

    Returns this

squares

stroke

  • stroke(c: string | boolean, width?: number, linejoin?: string, linecap?: string): this
  • Set current stroke style. Provide a valid color string or false to specify no stroke color.

    example

    form.stroke("#F90"), form.stroke("rgba(0,0,0,.5"), form.stroke(false), form.stroke("#000", 0.5, 'round', 'square')

    Parameters

    • c: string | boolean

      stroke color which can be as color, gradient, or pattern. (See canvas documentation)

    • Optional width: number

      Optional value (can be floating point) to set line width

    • Optional linejoin: string

      Optional string to set line joint style. Can be "miter", "bevel", or "round".

    • Optional linecap: string

      Optional string to set line cap style. Can be "butt", "round", or "square".

    Returns this

strokeOnly

  • strokeOnly(c: string | boolean, width?: number, linejoin?: string, linecap?: string): this
  • Set current stroke style and without fill.

    example

    form.strokeOnly("#F90"), form.strokeOnly("#000", 0.5, 'round', 'square')

    Parameters

    • c: string | boolean

      stroke color which can be as color, gradient, or pattern. (See canvas documentation

    • Optional width: number
    • Optional linejoin: string
    • Optional linecap: string

    Returns this

text

  • text(pt: PtLike, txt: string, maxWidth?: number): this

textBox

  • textBox(box: GroupLike, txt: string, verticalAlign?: string, tail?: string, overrideBaseline?: boolean): this
  • Fit a single-line text in a rectangular box

    Parameters

    • box: GroupLike

      a rectangle box defined by a Group

    • txt: string

      string of text

    • Default value verticalAlign: string = "middle"

      "top", "middle", or "bottom" to specify vertical alignment inside the box

    • Default value tail: string = ""

      text to indicate overflow such as "...". Default is empty "".

    • Default value overrideBaseline: boolean = true

      If true, use the corresponding baseline as verticalAlign. If false, use the current canvas context's textBaseline setting. Default is true.

    Returns this

useOffscreen

  • useOffscreen(off?: boolean, clear?: boolean | string): this
  • Toggle whether to draw on offscreen canvas (if offscreen is set in CanvasSpace)

    Parameters

    • Default value off: boolean = true

      if true, draw on offscreen canvas instead of the visible canvas. Default is true

    • Default value clear: boolean | string = false

      optionally provide a valid color string to fill a bg color. see CanvasSpace's clearOffscreen function.

    Returns this

Static _checkSize

  • _checkSize(pts: GroupLike | number[][], required?: number): boolean
  • Check number of items in a Group against a required number

    Parameters

    • pts: GroupLike | number[][]
    • Default value required: number = 2

    Returns boolean

Static arc

  • arc(ctx: CanvasRenderingContext2D, pt: PtLike, radius: number, startAngle: number, endAngle: number, cc?: boolean): void
  • A static function to draw an arc.

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • pt: PtLike

      center position

    • radius: number

      radius of the arc circle

    • startAngle: number

      start angle of the arc

    • endAngle: number

      end angle of the arc

    • Optional cc: boolean

      an optional boolean value to specify if it should be drawn clockwise (false) or counter-clockwise (true). Default is clockwise.

    Returns void

Static circle

  • circle(ctx: CanvasRenderingContext2D, pt: PtLike, radius?: number): void
  • A static function to draw a circle

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • pt: PtLike

      center position of the circle

    • Default value radius: number = 10

      radius of the circle

    Returns void

Static image

  • A static function to draw an image

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • img: ImageBitmap

      an image source (eg the image from <img>, <video> or <canvas>)

    • Default value target: PtLike | GroupLike = new Pt()

      a target area to place the image. Either a Pt specifying a position, or a Group that specifies a bounding box (top-left position, bottom-right position). Default is (0,0) at top-left.

    • Optional orig: GroupLike

      a Group (top-left position, bottom-right position) that specifies a cropping box in the original target.

    Returns void

Static line

  • line(ctx: CanvasRenderingContext2D, pts: GroupLike | number[][]): void
  • A static function to draw a line

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    Returns void

Static polygon

  • polygon(ctx: CanvasRenderingContext2D, pts: GroupLike | number[][]): void
  • A static function to draw polygon

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • pts: GroupLike | number[][]

      a Group of multiple Pts, or an array of multiple numeric arrays

    Returns void

Static rect

  • rect(ctx: CanvasRenderingContext2D, pts: GroupLike | number[][]): void
  • A static function to draw a rectangle

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • pts: GroupLike | number[][]

      usually a Group of 2 Pts specifying the top-left and bottom-right positions. Alternatively it can be an array of numeric arrays.

    Returns void

Static square

  • square(ctx: CanvasRenderingContext2D, pt: PtLike, halfsize: number): void
  • A static function to draw a square

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • pt: PtLike

      center position of the square

    • halfsize: number

      half size of the square

    Returns void

Static text

  • text(ctx: CanvasRenderingContext2D, pt: PtLike, txt: string, maxWidth?: number): void
  • A static function to draw text

    Parameters

    • ctx: CanvasRenderingContext2D

      canvas rendering context

    • pt: PtLike
    • txt: string
    • Optional maxWidth: number

    Returns void

Object literals

Protected _style

_style: object

store common styles so that they can be restored to canvas context when using multiple forms. See reset().

fillStyle

fillStyle: string = "#f03"

lineCap

lineCap: string = "butt"

lineJoin

lineJoin: string = "bevel"

lineWidth

lineWidth: number = 1

strokeStyle

strokeStyle: string = "#fff"

Generated using TypeDoc