Canvas
Class representing a Canvas element that can manage and render shapes.
Accessors
context
Get Signature
get context():
CanvasRenderingContext2D
Gets the 2D rendering context of the canvas.
Returns
CanvasRenderingContext2D
The 2D context of the canvas.
Defined in
interactive
Set Signature
set interactive(
value):void
Enables or disables features like panning, zooming, and dragging shapes. Automatically adds or removes event listeners as needed.
Parameters
• value: boolean
true to enable, false to disable interactivity.
Returns
void
Defined in
panOffset
Get Signature
get panOffset():
Point
Gets the current pan offset of the canvas.
Returns
The current pan offset as a Point object.
Set Signature
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
void
Defined in
zoomScale
Get Signature
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.
Returns
number
The current zoom scale.
Set Signature
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
void
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()
staticinit(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.