Canvas
Canvas
Constructors
new Canvas()
new Canvas(
element,pixelRatio):Canvas
Parameters
• element: HTMLCanvasElement
• pixelRatio: number
Returns
Source
Properties
alpha
alpha:
number
Source
colorVariables
colorVariables:
Record<string,string>
Source
context
context:
CanvasRenderingContext2D
Source
element
element:
HTMLCanvasElement
Source
fillColor
fillColor:
string
Source
fillStyle
fillStyle:
string
Source
font
font:
string
Source
fontColor
fontColor:
string
Source
generator
generator:
RoughGenerator
Source
origin
origin:
number[]
Source
px
px:
number
Source
ratio
ratio:
number
Source
roughness
roughness:
number
Source
scale
scale:
number
Source
stateStack
stateStack:
CanvasState[]
Source
strokeColor
strokeColor:
string
Source
strokePattern
strokePattern:
number[]
Source
strokeWidth
strokeWidth:
number
Source
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
Source
curve()
curve(
path,seed):Canvas
Draw a curved lines with fill and stroke
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
drawImage()
drawImage(
image,x,y,width,height):Canvas
Draw Image
Parameters
• image: CanvasImageSource
• x: number
• y: number
• width: number
• height: number
Returns
Source
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
Source
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
Source
fillCurve()
fillCurve(
path,seed):Canvas
Draw filled curved lines
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
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
Source
fillPath()
fillPath(
path,seed):Canvas
Draw filled path
Parameters
• path: SVGPath
• seed: number= 1
Returns
Source
fillPolygon()
fillPolygon(
path,seed):Canvas
Draw filled polygon
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
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
Source
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
Source
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
Source
globalCoordTransform()
globalCoordTransform(
point):number[]
Transform global coord to canvas coord (GCS —> CCS)
Parameters
• point: number[]
Returns
number[]
Source
globalCoordTransformRev()
globalCoordTransformRev(
point):number[]
Transform canvas coord to global coord (CCS —> GCS)
Parameters
• point: number[]
Returns
number[]
Source
globalTransform()
globalTransform():
Canvas
Transform global context to canvas context (origin, scale)
Returns
Source
line()
line(
x1,y1,x2,y2,seed):Canvas
Draw a line
Parameters
• x1: number
• y1: number
• x2: number
• y2: number
• seed: number= 1
Returns
Source
path()
path(
path,seed):Canvas
Draw a path with fill and stroke
Parameters
• path: SVGPath
• seed: number= 1
Returns
Source
polygon()
polygon(
path,seed):Canvas
Draw a polygon with fill and stroke
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
polyline()
polyline(
path,seed):Canvas
Draw polyline
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
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
Source
resolveColor()
resolveColor(
color):string
Resolve color variable to hex color string
Parameters
• color: string
Returns
string
Source
restore()
restore():
Canvas
Restore context
Returns
Source
restoreState()
restoreState():
Canvas
Restore the canvas states from a stack
Returns
Source
rotate()
rotate(
angle):void
Rotation transform
Parameters
• angle: number
anti-clockwise in degree
Returns
void
Source
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
Source
roundRectLine()
roundRectLine(
path,seed):Canvas
Draw rounded rect line
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
save()
save():
Canvas
Save context
Returns
Source
setAlpha()
setAlpha(
alpha):Canvas
Set alpha
Parameters
• alpha: number
Returns
Source
setFillColor()
setFillColor(
color):Canvas
Set fill color
Parameters
• color: string
Returns
Source
setFillStyle()
setFillStyle(
style):Canvas
Set fill style
Parameters
• style: string
Returns
Source
setFont()
setFont(
font):Canvas
Set font
Parameters
• font: string
Returns
Source
setFontColor()
setFontColor(
color):Canvas
Set font color
Parameters
• color: string
Returns
Source
setRoughness()
setRoughness(
roughness):Canvas
Set roughness
Parameters
• roughness: number
Returns
Source
setStrokeColor()
setStrokeColor(
color):Canvas
Set stroke color
Parameters
• color: string
Returns
Source
setStrokePattern()
setStrokePattern(
pattern):Canvas
Set stroke pattern
Parameters
• pattern: number[]
Returns
Source
setStrokeWidth()
setStrokeWidth(
width):Canvas
Set stroke width
Parameters
• width: number
Returns
Source
storeState()
storeState():
Canvas
Store current canvas state into a stack
Returns
Source
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
Source
strokeCurve()
strokeCurve(
path,seed):Canvas
Draw curved lines
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
strokeEllipse()
strokeEllipse(
x1,y1,x2,y2,seed):Canvas
Draw an ellipse
Parameters
• x1: number
• y1: number
• x2: number
• y2: number
• seed: number= 1
Returns
Source
strokePath()
strokePath(
path,seed):Canvas
Draw a path
Parameters
• path: SVGPath
• seed: number= 1
Returns
Source
strokePolygon()
strokePolygon(
path,seed):Canvas
Draw polygon
Parameters
• path: number[][]
• seed: number= 1
Returns
Source
strokeRect()
strokeRect(
x1,y1,x2,y2,seed):Canvas
Draw a rect
Parameters
• x1: number
• y1: number
• x2: number
• y2: number
• seed: number= 1
Returns
Source
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
Source
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
Source
translate()
translate(
x,y):void
Translate transform
Parameters
• x: number
• y: number
Returns
void