@fqqb/timeline

class Graphics

Draw on an HTML5 canvas.

This class wraps an HTML5 Canvas and 2D rendering context in a slightly higher-level API, while also allowing to register hit regions.

Properties
canvas, ctx, height, hitCanvas, hitCtx, width
Methods
constructor, addHitRegion, clearHitCanvas, copy, createChild, fillCanvas, fillEllipse, fillPath, fillRect, fillText, measureText, resize, strokeEllipse, strokePath, strokeRect

Properties

canvas
get
Type:
HTMLCanvasElement
ctx
get

Native draw context for the HTML5 Canvas.

Can be used to draw directly without using any convenience API.

Type:
CanvasRenderingContext2D
height
get

Returns the CSS height.

Type:
number
hitCanvas
get

Manages hit regions which connects DOM interactions to the Canvas.

Type:
HitCanvas
hitCtx
get

Draw context matching the hit canvas.

Type:
CanvasRenderingContext2D
width
get

Returns the CSS width.

Type:
number

Methods

constructor(canvas, hitCanvas?)
Parameters:
  • HTMLCanvasElement canvas
  • HitCanvas hitCanvas
addHitRegion(region)
Parameters:
Return type:
HitRegionBuilder
clearHitCanvas()
Return type:
void
copy(g, dx, dy)
Parameters:
Return type:
void
createChild(width, height)
Parameters:
  • number width
  • number height
Return type:
Graphics
fillCanvas(fill)
Parameters:
Return type:
void
fillEllipse(fill)
Parameters:
Return type:
void
fillPath(fill)
Parameters:
Return type:
void
fillRect(fill)
Parameters:
Return type:
void
fillText(fill)
Parameters:
Return type:
void
measureText(text, font)
Parameters:
  • string text
  • string font
Return type:
TextMetrics
resize(width, height)
Parameters:
  • number width
  • number height
Return type:
void
strokeEllipse(stroke)
Parameters:
Return type:
void
strokePath(stroke)
Parameters:
Return type:
void
strokeRect(stroke)
Parameters:
Return type:
void

Drawables