Class Canvas

A canvas Graphic to provide an adapter between the 2D Canvas API and the ExcaliburGraphicsContext.

The Canvas works by re-rastering a draw handler to a HTMLCanvasElement for every draw which is then passed to the ExcaliburGraphicsContext implementation as a rendered image.

Low performance API

Hierarchy

Raster
- Canvas

Index

Constructors

constructor

new Canvas(_options: GraphicOptions & RasterOptions & CanvasOptions): Canvas
Parameters
- _options: GraphicOptions & RasterOptions & CanvasOptions
Returns Canvas
Overrides Raster.constructor
- Defined in Graphics/Canvas.ts:25

Properties

_bitmap

_bitmap: HTMLCanvasElement

`Protected` _ctx

_ctx: CanvasRenderingContext2D

filtering

filtering: ImageFiltering = null

`Readonly` id

id: number = ...

lineCap

lineCap: "square" | "butt" | "round" = 'butt'

opacity

opacity: number = 1

Gets or sets the opacity of the graphic, 0 is transparent, 1 is solid (opaque).

quality

quality: number = 1

showDebug

showDebug: boolean = false

Gets or sets wether to show debug information about the graphic

tint

tint: Color = null

transform

transform: AffineMatrix = ...

Accessors

color

get color(): Color
Gets or sets the fillStyle of the Raster graphic. Setting the fillStyle will cause the raster to be flagged dirty causing a re-raster on the next draw.

Returns Color
Inherited from Raster.color
- Defined in Graphics/Raster.ts:203
set color(value: Color): void
Parameters
- value: Color
Returns void
Inherited from Raster.color
- Defined in Graphics/Raster.ts:206

ctx

get ctx(): CanvasRenderingContext2D
Return the 2D graphics context of this canvas

Returns CanvasRenderingContext2D
- Defined in Graphics/Canvas.ts:21

dirty

get dirty(): boolean
Gets whether the graphic is dirty, this means there are changes that haven't been re-rasterized

Returns boolean
Inherited from Raster.dirty
- Defined in Graphics/Raster.ts:123

flipHorizontal

get flipHorizontal(): boolean
Gets or sets the flipHorizontal, which will flip the graphic horizontally (across the y axis)

Returns boolean
Inherited from Raster.flipHorizontal
- Defined in Graphics/Graphic.ts:77
set flipHorizontal(value: boolean): void
Parameters
- value: boolean
Returns void
Inherited from Raster.flipHorizontal
- Defined in Graphics/Graphic.ts:81

flipVertical

get flipVertical(): boolean
Gets or sets the flipVertical, which will flip the graphic vertically (across the x axis)

Returns boolean
Inherited from Raster.flipVertical
- Defined in Graphics/Graphic.ts:90
set flipVertical(value: boolean): void
Parameters
- value: boolean
Returns void
Inherited from Raster.flipVertical
- Defined in Graphics/Graphic.ts:94

height

get height(): number
Gets or sets the current height of the Raster graphic. Setting the height will cause the raster to be flagged dirty causing a re-raster on the next draw.

Any padding or quality set will be factored into the height

Returns number
Inherited from Raster.height
- Defined in Graphics/Raster.ts:159
set height(value: number): void
Parameters
- value: number
Returns void
Inherited from Raster.height
- Defined in Graphics/Raster.ts:163

lineDash

get lineDash(): number[]
Returns number[]
Inherited from Raster.lineDash
- Defined in Graphics/Raster.ts:238
set lineDash(value: number[]): void
Parameters
- value: number[]
Returns void
Inherited from Raster.lineDash
- Defined in Graphics/Raster.ts:242

lineWidth

get lineWidth(): number
Gets or sets the line width of the Raster graphic. Setting the lineWidth will cause the raster to be flagged dirty causing a re-raster on the next draw.

Returns number
Inherited from Raster.lineWidth
- Defined in Graphics/Raster.ts:229
set lineWidth(value: number): void
Parameters
- value: number
Returns void
Inherited from Raster.lineWidth
- Defined in Graphics/Raster.ts:232

localBounds

get localBounds(): BoundingBox
Returns the local bounds of the Raster including the padding

Returns BoundingBox
Inherited from Raster.localBounds
- Defined in Graphics/Raster.ts:181

origin

get origin(): Vector
Gets or sets the origin of the graphic, if not set the center of the graphic is the origin

Returns Vector
Inherited from Raster.origin
- Defined in Graphics/Graphic.ts:136
set origin(value: Vector): void
Parameters
- value: Vector
Returns void
Inherited from Raster.origin
- Defined in Graphics/Graphic.ts:140

padding

get padding(): number
Returns number
Inherited from Raster.padding
- Defined in Graphics/Raster.ts:248
set padding(value: number): void
Parameters
- value: number
Returns void
Inherited from Raster.padding
- Defined in Graphics/Raster.ts:252

rotation

get rotation(): number
Gets or sets the rotation of the graphic

Returns number
Inherited from Raster.rotation
- Defined in Graphics/Graphic.ts:103
set rotation(value: number): void
Parameters
- value: number
Returns void
Inherited from Raster.rotation
- Defined in Graphics/Graphic.ts:107

scale

get scale(): Vector
Gets or sets the scale of the graphic, this affects the width and

Returns Vector
Inherited from Raster.scale
- Defined in Graphics/Graphic.ts:121
set scale(value: Vector): void
Parameters
- value: Vector
Returns void
Inherited from Raster.scale
- Defined in Graphics/Graphic.ts:125

smoothing

get smoothing(): boolean
Gets or sets the smoothing (anti-aliasing of the graphic). Setting the height will cause the raster to be flagged dirty causing a re-raster on the next draw.

Returns boolean
Inherited from Raster.smoothing
- Defined in Graphics/Raster.ts:190
set smoothing(value: boolean): void
Parameters
- value: boolean
Returns void
Inherited from Raster.smoothing
- Defined in Graphics/Raster.ts:193

strokeColor

get strokeColor(): Color
Gets or sets the strokeStyle of the Raster graphic. Setting the strokeStyle will cause the raster to be flagged dirty causing a re-raster on the next draw.

Returns Color
Inherited from Raster.strokeColor
- Defined in Graphics/Raster.ts:216
set strokeColor(value: Color): void
Parameters
- value: Color
Returns void
Inherited from Raster.strokeColor
- Defined in Graphics/Raster.ts:219

width

get width(): number
Gets or sets the current width of the Raster graphic. Setting the width will cause the raster to be flagged dirty causing a re-raster on the next draw.

Any paddings or quality set will be factored into the width

Returns number
Inherited from Raster.width
- Defined in Graphics/Raster.ts:142
set width(value: number): void
Parameters
- value: number
Returns void
Inherited from Raster.width
- Defined in Graphics/Raster.ts:145

Methods

`Protected` _applyRasterProperties

_applyRasterProperties(ctx: CanvasRenderingContext2D): void
Parameters
- ctx: CanvasRenderingContext2D
Returns void
Inherited from Raster._applyRasterProperties
- Defined in Graphics/Raster.ts:272

`Protected` _drawImage

_drawImage(ex: ExcaliburGraphicsContext, x: number, y: number): void
Meant to be overridden by the graphic implementation to draw the underlying image (HTMLCanvasElement or HTMLImageElement) to the graphics context without transform. Transformations like position, rotation, and scale are handled by Graphic._preDraw and Graphic._postDraw
Parameters
- ex: ExcaliburGraphicsContext
  
  The excalibur graphics context
- x: number
- y: number
Returns void
Inherited from Raster._drawImage
- Defined in Graphics/Raster.ts:285

`Protected` _flip

_flip(ex: AffineMatrix | ExcaliburGraphicsContext): void
Parameters
- ex: AffineMatrix | ExcaliburGraphicsContext
Returns void
Inherited from Raster._flip
- Defined in Graphics/Graphic.ts:261

`Protected` _postDraw

_postDraw(ex: ExcaliburGraphicsContext): void
Apply any additional work after Graphic._drawImage and restore the context state.
Parameters
- ex: ExcaliburGraphicsContext
Returns void
Inherited from Raster._postDraw
- Defined in Graphics/Graphic.ts:277

`Protected` _preDraw

_preDraw(ex: ExcaliburGraphicsContext, x: number, y: number): void
Apply affine transformations to the graphics context to manipulate the graphic before Graphic._drawImage
Parameters
- ex: ExcaliburGraphicsContext
- x: number
- y: number
Returns void
Inherited from Raster._preDraw
- Defined in Graphics/Graphic.ts:232

`Protected` _rotate

_rotate(ex: AffineMatrix | ExcaliburGraphicsContext): void
Parameters
- ex: AffineMatrix | ExcaliburGraphicsContext
Returns void
Inherited from Raster._rotate
- Defined in Graphics/Graphic.ts:250

clone

clone(): Canvas
Returns a new instance of the graphic that has the same properties

Returns Canvas
Overrides Raster.clone
- Defined in Graphics/Canvas.ts:29

cloneGraphicOptions

cloneGraphicOptions(): GraphicOptions
Returns GraphicOptions
Inherited from Raster.cloneGraphicOptions
- Defined in Graphics/Graphic.ts:158

cloneRasterOptions

cloneRasterOptions(): RasterOptions
Returns RasterOptions
Inherited from Raster.cloneRasterOptions
- Defined in Graphics/Raster.ts:107

draw

draw(ex: ExcaliburGraphicsContext, x: number, y: number): void
Draw the whole graphic to the context including transform
Parameters
- ex: ExcaliburGraphicsContext
  
  The excalibur graphics context
- x: number
- y: number
Returns void
Inherited from Raster.draw
- Defined in Graphics/Graphic.ts:210

execute

execute(ctx: CanvasRenderingContext2D): void
Executes drawing implementation of the graphic, this is where the specific drawing code for the graphic should be implemented. Once rasterize() the graphic can be drawn to the ExcaliburGraphicsContext via draw(...)
Parameters
- ctx: CanvasRenderingContext2D
  
  Canvas to draw the graphic to
Returns void
Overrides Raster.execute
- Defined in Graphics/Canvas.ts:37

flagDirty

flagDirty(): void
Flags the graphic as dirty, meaning it must be re-rasterized before draw. This should be called any time the graphics state changes such that it affects the outputted drawing

Returns void
Inherited from Raster.flagDirty
- Defined in Graphics/Raster.ts:131

isStale

isStale(): boolean
Returns boolean
Inherited from Raster.isStale
- Defined in Graphics/Graphic.ts:63

rasterize

rasterize(): void
Rasterize the graphic to a bitmap making it usable as in excalibur. Rasterize is called automatically if the graphic is Raster.dirty on the next Graphic.draw call

Returns void
Inherited from Raster.rasterize
- Defined in Graphics/Raster.ts:261

Class Canvas

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

_options: GraphicOptions & RasterOptions & CanvasOptions

Returns Canvas

Properties

_bitmap

Protected _ctx

filtering

Readonly id

lineCap

opacity

quality

showDebug

tint

transform

Accessors

color

Returns Color

Parameters

value: Color

Returns void

ctx

Returns CanvasRenderingContext2D

dirty

Returns boolean

flipHorizontal

Returns boolean

Parameters

value: boolean

Returns void

flipVertical

Returns boolean

Parameters

value: boolean

Returns void

height

Returns number

Parameters

value: number

Returns void

lineDash

Returns number[]

Parameters

value: number[]

Returns void

lineWidth

Returns number

Parameters

value: number

Returns void

localBounds

Returns BoundingBox

origin

Returns Vector

Parameters

value: Vector

Returns void

padding

Returns number

Parameters

value: number

Returns void

rotation

Returns number

Parameters

value: number

Returns void

scale

Returns Vector

Parameters

value: Vector

Returns void

`Protected` _ctx

`Readonly` id

`Protected` _applyRasterProperties

`Protected` _drawImage

`Protected` _flip

`Protected` _postDraw

`Protected` _preDraw

`Protected` _rotate