Canvas
Class representing a Canvas element that can manage and render shapes.
Accessors
context
get
context():CanvasRenderingContext2D
Gets the 2D rendering context of the canvas.
Returns
CanvasRenderingContext2D
The 2D context of the canvas.
Defined in
panOffset
get
panOffset():Point
Gets the current pan offset of the canvas.
set
panOffset(value
):void
Sets the pan offset of the canvas and triggers a redraw.
Parameters
• value: Point
The new pan offset to set.
Returns
The current pan offset as a Point
object.
Defined in
zoomScale
get
zoomScale():number
Gets the current zoom scale of the canvas.
A value of 1
represents 100% zoom. Values below 1
indicate zooming out,
and values above 1
indicate zooming in.
set
zoomScale(value
):void
Sets the zoom scale of the canvas and applies the zoom.
Parameters
• value: number
The new zoom scale to set.
Returns
number
The current zoom scale.
Defined in
Methods
clear()
clear():
void
Clears the canvas by removing all content.
Returns
void
Defined in
draw()
draw(
shape
):void
Renders the specified shape on the canvas if shape is visible.
Parameters
• shape: IShape
The shape to render.
Returns
void
Defined in
getCenter()
getCenter():
Point
Returns the center point of the canvas based on its width and height.
Returns
The center point of the canvas as a Point
object.
Defined in
redraw()
redraw():
void
Clears the canvas and re-renders all watched and visible shapes.
Returns
void
Defined in
resetPan()
resetPan():
void
Resets the pan offset to its default value (0, 0).
Returns
void
Defined in
resetZoom()
resetZoom():
void
Resets the zoom scale to its default value (1). If the canvas is both zoomable and pannable, it resets both zoom and pan.
Returns
void
Defined in
resetZoomPan()
resetZoomPan():
void
Resets both the zoom scale and pan offset to their default values (1 for zoom scale and (0, 0) for pan).
Returns
void
Defined in
unwatch()
unwatch(
shapeOrShapes
,redraw
):void
Unregisters a shape or an array of shapes from being watched and re-renders the canvas.
Parameters
• shapeOrShapes: IShape
| IShape
[]
The shape(s) to stop watching.
• redraw: boolean
= true
Whether to immediately redraw the canvas after unregistering the shape(s).
Returns
void
Defined in
watch()
watch(
shapeOrShapes
,redraw
):void
Registers a shape or an array of shapes to be watched for changes and renders them.
Parameters
• shapeOrShapes: IShape
| IShape
[]
The shape(s) to watch and render on the canvas.
• redraw: boolean
= true
Whether to immediately redraw the canvas after registering the shape(s).
Returns
void
Defined in
zoomIn()
zoomIn(
position
?):void
Zooms in on the canvas by increasing the zoom scale. If a position is provided, the zoom will be centered around that point. Otherwise, it defaults to zooming in on the center of the canvas.
Parameters
• position?: Point
Optional position to center the zoom on.
Returns
void
Defined in
zoomOut()
zoomOut(
position
?):void
Zooms out on the canvas by decreasing the zoom scale. If a position is provided, the zoom will be centered around that point. Otherwise, it defaults to zooming out from the center of the canvas.
Parameters
• position?: Point
Optional position to center the zoom on.
Returns
void
Defined in
init()
static
init(id
,options
?,style
?):Canvas
Initializes a Canvas instance by retrieving the canvas element by ID and its context.
Parameters
• id: string
The ID of the HTML canvas element.
• options?: ICanvasOptions
Optional configuration options for the canvas.
• style?: ICanvasStyle
Optional styling options for the canvas.
Returns
A new Canvas instance.
Throws
ReferenceError if the canvas element is not found.
Throws
TypeError if the element is not a valid canvas or can't get 2d context.