# Class: CanvasContainer
core.CanvasContainer
Base class for Pulsar elements which contain ResponsiveCanvas instances.
Instances will be a child element of a PulsarObject.
It has an internal coordinate system which is independent of the coordinates of the canvas drawing surface for ease of use.
It will also watch the parent object and resize all canvases accordingly whenever the parent is resized.
# Hierarchy
HTMLElement↳
CanvasContainer↳↳
Plot
# Table of contents
# Properties
# Constructors
# Methods
# Properties
# Defaults
▪ Static Defaults: Object
| Name | Default value |
|---|---|
xLims | [0, 10] |
yLims | [-10, 0] |
origin | {x: 0, y: 0} |
# Type declaration
| Name | Type |
|---|---|
xLims | [number, number] |
yLims | [number, number] |
origin | { x: number = 0; y: number = 0 } |
origin.x | number |
origin.y | number |
# Defined in
core/CanvasContainer.ts:63 (opens new window)
# parent
• parent: PulsarObject
Parent instance of PulsarObject.
# Defined in
core/CanvasContainer.ts:21 (opens new window)
# canvases
• canvases: ResponsiveCanvas[] = []
List of the child ResponsiveCanvas instances of the container.
# Defined in
core/CanvasContainer.ts:25 (opens new window)
# scale
• scale: Object
Scale of the internal coordinate system in canvas pixels to container units.
# Type declaration
| Name | Type |
|---|---|
x | number |
y | number |
# Defined in
core/CanvasContainer.ts:29 (opens new window)
# resizeObserver
• resizeObserver: ResizeObserver
The ResizeObserver (opens new window) instance which will watch the parent object to detect a resize event.
# Defined in
core/CanvasContainer.ts:39 (opens new window)
# xLims
• xLims: [number, number] = CanvasContainer.Defaults.xLims
The horizontal limits of the internal coordinate system in container units.
# Defined in
core/CanvasContainer.ts:43 (opens new window)
# yLims
• yLims: [number, number] = CanvasContainer.Defaults.yLims
The vertical limits of the internal coordinate system in container units.
# Defined in
core/CanvasContainer.ts:47 (opens new window)
# origin
• origin: Object = CanvasContainer.Defaults.origin
The origin of the internal coordinate system in canvas units.
# Type declaration
| Name | Type |
|---|---|
x | number |
y | number |
# Defined in
core/CanvasContainer.ts:51 (opens new window)
# Constructors
# constructor
• new CanvasContainer(parent, options?)
# Parameters
| Name | Type | Description |
|---|---|---|
parent | PulsarObject | The parent PulsarObject element. |
options | Partial<{ xLims: [number, number] ; yLims: [number, number] ; origin: [number, number] | "centre" }> | Options for the container. |
# Overrides
HTMLElement.constructor
# Defined in
core/CanvasContainer.ts:76 (opens new window)
# Methods
# setXLims
▸ setXLims(min, max): void
Sets the horizontal limits of the internal coordinate system in container units.
# Parameters
| Name | Type | Description |
|---|---|---|
min | number | The minimum horizontal value. |
max | number | The maximum horizontal value. |
# Returns
void
# Defined in
core/CanvasContainer.ts:112 (opens new window)
# setYLims
▸ setYLims(min, max): void
Sets the vertical limits of the internal coordinate system in container units.
# Parameters
| Name | Type | Description |
|---|---|---|
min | number | The minimum vertical value. |
max | number | The maximum vertical value. |
# Returns
void
# Defined in
core/CanvasContainer.ts:127 (opens new window)
# setOrigin
▸ setOrigin(...point): void
Sets the origin of the internal coordinate system in canvas pixels.
x and y values may be passed or the value "centre" may be passed to conveniently set the origin to the centre of the canvas.
Note that for the HTML5 canvas the origin is in the top-left corner by default and the x-axis points rightwards, while the y-axis points downwards.
# Parameters
| Name | Type | Description |
|---|---|---|
...point | [number, number] | ["centre"] | The new origin in canvas pixels. |
# Returns
void