Skip to content

Canvas

Canvas

Constructors

new Canvas()

new Canvas(element, pixelRatio): Canvas

Parameters

element: HTMLCanvasElement

pixelRatio: number

Returns

Canvas

Source

graphics/graphics.ts:199

Properties

alpha

alpha: number

Source

graphics/graphics.ts:194


colorVariables

colorVariables: Record<string, string>

Source

graphics/graphics.ts:182


context

context: CanvasRenderingContext2D

Source

graphics/graphics.ts:181


element

element: HTMLCanvasElement

Source

graphics/graphics.ts:180


fillColor

fillColor: string

Source

graphics/graphics.ts:190


fillStyle

fillStyle: string

Source

graphics/graphics.ts:191


font

font: string

Source

graphics/graphics.ts:193


fontColor

fontColor: string

Source

graphics/graphics.ts:192


generator

generator: RoughGenerator

Source

graphics/graphics.ts:183


origin

origin: number[]

Source

graphics/graphics.ts:196


px

px: number

Source

graphics/graphics.ts:185


ratio

ratio: number

Source

graphics/graphics.ts:184


roughness

roughness: number

Source

graphics/graphics.ts:195


scale

scale: number

Source

graphics/graphics.ts:197


stateStack

stateStack: CanvasState[]

Source

graphics/graphics.ts:186


strokeColor

strokeColor: string

Source

graphics/graphics.ts:187


strokePattern

strokePattern: number[]

Source

graphics/graphics.ts:189


strokeWidth

strokeWidth: number

Source

graphics/graphics.ts:188

Methods

arc()

arc(x, y, r, startAngle, endAngle, seed): Canvas

Draw an arc with fill and stroke. angles are started from 12’clock in degree.

Parameters

x: number

y: number

r: number

startAngle: number

endAngle: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1243


curve()

curve(path, seed): Canvas

Draw a curved lines with fill and stroke

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1075


drawImage()

drawImage(image, x, y, width, height): Canvas

Draw Image

Parameters

image: CanvasImageSource

x: number

y: number

width: number

height: number

Returns

Canvas

Source

graphics/graphics.ts:1343


ellipse()

ellipse(x1, y1, x2, y2, seed): Canvas

Draw an ellipse with fill and stroke

Parameters

x1: number

y1: number

x2: number

y2: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:783


fillArc()

fillArc(x, y, r, startAngle, endAngle, seed): Canvas

Draw filled arc. angles are started from 12’clock in degree.

Parameters

x: number

y: number

r: number

startAngle: number

endAngle: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1207


fillCurve()

fillCurve(path, seed): Canvas

Draw filled curved lines

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1035


fillEllipse()

fillEllipse(x1, y1, x2, y2, seed): Canvas

Draw a filled ellipse

Parameters

x1: number

y1: number

x2: number

y2: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:735


fillPath()

fillPath(path, seed): Canvas

Draw filled path

Parameters

path: SVGPath

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1291


fillPolygon()

fillPolygon(path, seed): Canvas

Draw filled polygon

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1124


fillRect()

fillRect(x1, y1, x2, y2, seed): Canvas

Draw a filled rect

Parameters

x1: number

y1: number

x2: number

y2: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:496


fillRoundRect()

fillRoundRect(x1, y1, x2, y2, radius, seed): Canvas

Draw a filled and rounded rect

Parameters

x1: number

y1: number

x2: number

y2: number

radius: number | number[]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:608


fillText()

fillText(x, y, text): Canvas

Fill a text

Parameters

x: number

y: number

text baseline (metric.ascent - not the top of text)

text: string

Returns

Canvas

Source

graphics/graphics.ts:1331


globalCoordTransform()

globalCoordTransform(point): number[]

Transform global coord to canvas coord (GCS —> CCS)

Parameters

point: number[]

Returns

number[]

Source

graphics/graphics.ts:287


globalCoordTransformRev()

globalCoordTransformRev(point): number[]

Transform canvas coord to global coord (CCS —> GCS)

Parameters

point: number[]

Returns

number[]

Source

graphics/graphics.ts:296


globalTransform()

globalTransform(): Canvas

Transform global context to canvas context (origin, scale)

Returns

Canvas

Source

graphics/graphics.ts:275


line()

line(x1, y1, x2, y2, seed): Canvas

Draw a line

Parameters

x1: number

y1: number

x2: number

y2: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:418


path()

path(path, seed): Canvas

Draw a path with fill and stroke

Parameters

path: SVGPath

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1319


polygon()

polygon(path, seed): Canvas

Draw a polygon with fill and stroke

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1157


polyline()

polyline(path, seed): Canvas

Draw polyline

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:798


rect()

rect(x1, y1, x2, y2, seed): Canvas

Draw a rect with fill and stroke

Parameters

x1: number

y1: number

x2: number

y2: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:530


resolveColor()

resolveColor(color): string

Resolve color variable to hex color string

Parameters

color: string

Returns

string

Source

graphics/graphics.ts:228


restore()

restore(): Canvas

Restore context

Returns

Canvas

Source

graphics/graphics.ts:313


restoreState()

restoreState(): Canvas

Restore the canvas states from a stack

Returns

Canvas

Source

graphics/graphics.ts:256


rotate()

rotate(angle): void

Rotation transform

Parameters

angle: number

anti-clockwise in degree

Returns

void

Source

graphics/graphics.ts:329


roundRect()

roundRect(x1, y1, x2, y2, radius, seed): Canvas

Draw a rounded rect with fill and stroke

Parameters

x1: number

y1: number

x2: number

y2: number

radius: number | number[]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:667


roundRectLine()

roundRectLine(path, seed): Canvas

Draw rounded rect line

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:836


save()

save(): Canvas

Save context

Returns

Canvas

Source

graphics/graphics.ts:305


setAlpha()

setAlpha(alpha): Canvas

Set alpha

Parameters

alpha: number

Returns

Canvas

Source

graphics/graphics.ts:392


setFillColor()

setFillColor(color): Canvas

Set fill color

Parameters

color: string

Returns

Canvas

Source

graphics/graphics.ts:360


setFillStyle()

setFillStyle(style): Canvas

Set fill style

Parameters

style: string

Returns

Canvas

Source

graphics/graphics.ts:368


setFont()

setFont(font): Canvas

Set font

Parameters

font: string

Returns

Canvas

Source

graphics/graphics.ts:384


setFontColor()

setFontColor(color): Canvas

Set font color

Parameters

color: string

Returns

Canvas

Source

graphics/graphics.ts:376


setRoughness()

setRoughness(roughness): Canvas

Set roughness

Parameters

roughness: number

Returns

Canvas

Source

graphics/graphics.ts:400


setStrokeColor()

setStrokeColor(color): Canvas

Set stroke color

Parameters

color: string

Returns

Canvas

Source

graphics/graphics.ts:336


setStrokePattern()

setStrokePattern(pattern): Canvas

Set stroke pattern

Parameters

pattern: number[]

Returns

Canvas

Source

graphics/graphics.ts:352


setStrokeWidth()

setStrokeWidth(width): Canvas

Set stroke width

Parameters

width: number

Returns

Canvas

Source

graphics/graphics.ts:344


storeState()

storeState(): Canvas

Store current canvas state into a stack

Returns

Canvas

Source

graphics/graphics.ts:237


strokeArc()

strokeArc(x, y, r, startAngle, endAngle, seed): Canvas

Draw an arc. angles are started from 3’clock in degree (0~360).

Parameters

x: number

y: number

r: number

startAngle: number

endAngle: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1166


strokeCurve()

strokeCurve(path, seed): Canvas

Draw curved lines

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:999


strokeEllipse()

strokeEllipse(x1, y1, x2, y2, seed): Canvas

Draw an ellipse

Parameters

x1: number

y1: number

x2: number

y2: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:683


strokePath()

strokePath(path, seed): Canvas

Draw a path

Parameters

path: SVGPath

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1259


strokePolygon()

strokePolygon(path, seed): Canvas

Draw polygon

Parameters

path: number[][]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:1084


strokeRect()

strokeRect(x1, y1, x2, y2, seed): Canvas

Draw a rect

Parameters

x1: number

y1: number

x2: number

y2: number

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:455


strokeRoundRect()

strokeRoundRect(x1, y1, x2, y2, radius, seed): Canvas

Draw a rounded rect

Parameters

x1: number

y1: number

x2: number

y2: number

radius: number | number[]

seed: number= 1

Returns

Canvas

Source

graphics/graphics.ts:545


textMetric()

textMetric(text): CanvasTextMetric

Get Text Metric Ref: https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics

Values:

  • ascent: Distance from the baseline to the top of the box.
  • descent: Distance from the baseline to the bottom of the box.
  • actualAscent: Distance from the baseline to the top of the font (varies for each character: ”.” is a small value, ”|” is a large value).
  • actualDescent: Distance from the baseline to the bottom of the font (varies for each character).

Hints:

  • ascent + descent = height
  • ascent + descent > actualAscent + actualDescent

Parameters

text: string

Returns

CanvasTextMetric

Source

graphics/graphics.ts:1371


translate()

translate(x, y): void

Translate transform

Parameters

x: number

y: number

Returns

void

Source

graphics/graphics.ts:321