Class Drawer

Draws onto a Region of a CanvasRenderingContext2D.

Constructors

constructor

new Drawer(
    context: CanvasRenderingContext2D,
    region: Region,
    clipRegion: Region,
    origin?: Point,
): Drawer
Constructs a new drawer from a raw rendering context. This is likely not what you want, if you're just making a sequence.

The rationale for there being two different regions is that it's convenient for some algorithms to have a well-defined area for them to draw their graphic in. Passing the clipping region itself to such algorithms would cause unexpected results when the clipping region itself has to be clipped within a parent drawer.
Parameters
- context: CanvasRenderingContext2D
  The rendering context to draw onto.
- region: Region
  Area for drawing, in canvas coordinates.
- clipRegion: Region
  Area where drawing is actually visible, in canvas coordinates.
- origin: Point = ...
  The place where (0, 0) is within the drawing region.
Returns Drawer
See
gfx/Border.EllipseBorder.draw for an example of something that would behave unexpectedly.
- Defined in src/gfx/Drawer.ts:89

Methods

`Static`completeLineStyle

completeLineStyle(partial: Partial<LineStyle>): LineStyle
Makes a LineStyle non-partial by setting missing properties to defaults.
Parameters
- partial: Partial<LineStyle>
Returns LineStyle
- Defined in src/gfx/Drawer.ts:27

`Static`completeArrowheadStyle

completeArrowheadStyle(partial: Partial<ArrowStyle>): ArrowStyle
Makes a ArrowheadStyle non-partial by setting missing properties to defaults.
Parameters
- partial: Partial<ArrowStyle>
Returns ArrowStyle
- Defined in src/gfx/Drawer.ts:41

`Static`completeFontStyle

completeFontStyle(partial: Partial<FontStyle>): FontStyle
Makes a FontStyle non-partial by setting missing properties to defaults.
Parameters
- partial: Partial<FontStyle>
Returns FontStyle
- Defined in src/gfx/Drawer.ts:56

`Static`completeTextAlign

completeTextAlign(partial: Partial<TextAlign>): TextAlign
Makes a TextAlign non-partial by setting missing properties to defaults.
Parameters
- partial: Partial<TextAlign>
Returns TextAlign
- Defined in src/gfx/Drawer.ts:65

subregion

subregion(region: Region): Drawer
Creates a sub-drawer that draws to the same context as this one, but clipped to a lesser or equal region.
Parameters
- region: Region
  Area where the resulting sub-drawer will draw, in the coordinates of the current drawer's region. The sub-drawer's clipping region will be constrained to the clipping region of this instance.
Returns Drawer
See
constructor for why there is a separate drawing and clipping region.
- Defined in src/gfx/Drawer.ts:104

withTranslatedOrigin

withTranslatedOrigin(origin: Point): Drawer
Creates a copy of this but with a different origin.
Parameters
- origin: Point
Returns Drawer
- Defined in src/gfx/Drawer.ts:110

getSize

getSize(): Size
Gets the size of the drawing region.

Returns Size
See
- getClipSize if you want the size of the clipping region instead.
- constructor for why there is a separate drawing and clipping region.
- Defined in src/gfx/Drawer.ts:120

getClipSize

getClipSize(): Size
Gets the size of the clipping region.

Returns Size
See
- getClipSize if you want the size of the drawing region instead.
- constructor for why there is a separate drawing and clipping region.
- Defined in src/gfx/Drawer.ts:128

getLocalRegion

getLocalRegion(): Region
Creates a region with an origin of (0, 0) and a size of getSize.

Returns Region
- Defined in src/gfx/Drawer.ts:131

drawLine

drawLine(start: Point, end: Point, style?: Partial<LineStyle>): void
Draws a line between two points.
Parameters
- start: Point
- end: Point
- style: Partial<LineStyle> = {}
Returns void
- Defined in src/gfx/Drawer.ts:187

drawMultiLine

drawMultiLine(points: Iterable<Point>, style: Partial<LineStyle>): void
Draws a line through multiple points. Line drawing only takes place if the iterable yields at least two points.
Parameters
- points: Iterable<Point>
- style: Partial<LineStyle>
Returns void
- Defined in src/gfx/Drawer.ts:192

drawArrowhead

drawArrowhead(
    start: Point,
    end: Point,
    lineStyle?: Partial<LineStyle>,
    arrowheadStyle?: Partial<ArrowStyle>,
): void
Draws the head of an arrow at the end of the specified line.

A full arrow can be drawn by calling drawLine with the same points.

A two-headed arrow can be drawn by calling this again, but with the start and end points swapped.
Parameters
- start: Point
- end: Point
- lineStyle: Partial<LineStyle> = {}
- arrowheadStyle: Partial<ArrowStyle> = {}
Returns void
- Defined in src/gfx/Drawer.ts:219

drawEllipse

drawEllipse(
    center: Point,
    size: Size,
    lineStyle?: Partial<LineStyle> | null,
    fillStyle?: DrawStyle | null,
    extras?: Partial<EllipseExtras>,
): void
Draws an ellipse.
Parameters
- center: Point
- size: Size
- lineStyle: Partial<LineStyle> | null = {}
- fillStyle: DrawStyle | null = null
- extras: Partial<EllipseExtras> = {}
Returns void
See
CanvasRenderingContext2D.ellipse
- Defined in src/gfx/Drawer.ts:263

drawRectangle

drawRectangle(
    topLeft: Point,
    size: Size,
    lineStyle?: Partial<LineStyle> | null,
    fillStyle?: DrawStyle | null,
): void
Draws a rectangle specified by its top left corner and size.
Parameters
- topLeft: Point
- size: Size
- lineStyle: Partial<LineStyle> | null = {}
- fillStyle: DrawStyle | null = null
Returns void
- Defined in src/gfx/Drawer.ts:279

drawText

drawText(
    text: string,
    position: Point,
    align?: Partial<TextAlign>,
    style?: Partial<FontStyle>,
): void
Draws some text. You can use gfx/TextWrapper.TextWrapper if you need wrapping.
Parameters
- text: string
- position: Point
- align: Partial<TextAlign> = {}
- style: Partial<FontStyle> = {}
Returns void
- Defined in src/gfx/Drawer.ts:289

measureText

measureText(
    text: string,
    align?: Partial<TextAlign>,
    style?: Partial<FontStyle>,
): TextMetrics
Measures some text. Useful for making judgements about how to draw it.
Parameters
- text: string
- align: Partial<TextAlign> = {}
- style: Partial<FontStyle> = {}
Returns TextMetrics
See
TextMetrics
- Defined in src/gfx/Drawer.ts:307

fill

fill(fillStyle: DrawStyle): void
Fills the entire drawing area.
Parameters
- fillStyle: DrawStyle
Returns void
- Defined in src/gfx/Drawer.ts:325

getImageData

getImageData(settings?: ImageDataSettings): ImageData
getImageData, but only within the clipping region of this drawer.
Parameters
- Optionalsettings: ImageDataSettings
Returns ImageData
- Defined in src/gfx/Drawer.ts:334

drawFreeform

drawFreeform(fn: (ctx: CanvasRenderingContext2D) => void): void
Escape hatch that gives you direct access to the underlying CanvasRenderingContext2D.

SAFETY: The drawing state stack MUST NOT be different after your function returns! This is to prevent future drawing operations from being affected.
Parameters
- fn: (ctx: CanvasRenderingContext2D) => void
Returns void
- Defined in src/gfx/Drawer.ts:343

getRawContext

getRawContext(): CanvasRenderingContext2D
Gets the underlying canvas rendering context. Prefer not using this, since it defeats the whole purpose of being able to draw with styles and clipping. Here be dragons!

Returns CanvasRenderingContext2D
- Defined in src/gfx/Drawer.ts:350

Class Drawer

Index

Constructors

Methods

Constructors

constructor

Parameters

Returns Drawer

See

Methods

StaticcompleteLineStyle

Parameters

Returns LineStyle

StaticcompleteArrowheadStyle

Parameters

Returns ArrowStyle

StaticcompleteFontStyle

Parameters

Returns FontStyle

StaticcompleteTextAlign

Parameters

Returns TextAlign

subregion

Parameters

Returns Drawer

See

withTranslatedOrigin

Parameters

Returns Drawer

getSize

Returns Size

See

getClipSize

Returns Size

See

getLocalRegion

Returns Region

drawLine

Parameters

Returns void

drawMultiLine

Parameters

Returns void

drawArrowhead

Parameters

Returns void

drawEllipse

Parameters

Returns void

See

drawRectangle

Parameters

Returns void

drawText

Parameters

Returns void

measureText

Parameters

Returns TextMetrics

See

fill

Parameters

Returns void

getImageData

Parameters

Returns ImageData

drawFreeform

Parameters

Returns void

getRawContext

Returns CanvasRenderingContext2D

Settings

On This Page

`Static`completeLineStyle

`Static`completeArrowheadStyle

`Static`completeFontStyle

`Static`completeTextAlign