Create a CanvasSpace which represents a HTML Canvas Space
Specify an element by its "id" attribute as string, or by the element object itself. An element can be an existing <canvas>
, or a <div>
container in which a new <canvas>
will be created. If left empty, a <div id="pt_container"><canvas id="pt" /></div>
will be added to DOM. Use css to customize its appearance if needed.
an optional callback function(boundingBox, spaceElement)
to be called when canvas is appended and ready. Alternatively, a "ready" event will also be fired from the <canvas>
element when it's appended, which can be traced with spaceInstance.canvas.addEventListener("ready")
Set whether the canvas element should resize when its container is resized.
Set whether the canvas element should resize when its container is resized.
a boolean value indicating if auto size is set
Set a background color for this canvas. Alternatively, you may use clear()
function.
Set a background color for this canvas. Alternatively, you may use clear()
function.
background color as hex or rgba string
Get the size of this bounding box as a Pt
Get the rendering context of canvas
Get the html canvas element
Check if an offscreen canvas is created
Get height of canvas
The bounding box of the canvas
Get a boolean to indicate whether the animation is playing
Get the offscreen canvas element
Get the rendering context of offscreen canvas (if created via setup()
)
Get this space's bounding box
Get the parent element that contains the canvas element
pixelScale
property returns a number that let you determine if the screen is "retina" (when value >= 2)
Get the mouse or touch pointer that stores the last action
A property to indicate if the Space is ready
Get the size of this bounding box as a Pt
Get width of canvas
Helper function to create a DOM element
element tag name
element id attribute
Go through all the players
and call its action
callback function
an UIPointerActions constant or string: "up", "down", "move", "drag", "drop", "over", and "out"
mouse or touch event
MouseDown handler
MouseMove handler
MouseOut handler
MouseOver handler
MouseUp handler
Handle callbacks after element is mounted in DOM
Window resize handling
TouchMove handler
Add an IPlayer to this space. An IPlayer can define the following callback functions:
animate( time, ftime, space )
start(bound, space)
resize( size, event )
action( type, x, y, event )
Subclasses of Space may define other callback functions.Bind event listener in canvas element. You can also use bindMouse
or bindTouch
to bind mouse or touch events conveniently.
an event string such as "mousedown"
callback function for this event
A convenient method to bind (or unbind) all mouse events in canvas element. All "players" added to this space that implements an action
callback property will receive mouse event callbacks. The types of mouse actions are defined by UIPointerActions constants: "up", "down", "move", "drag", "drop", "over", and "out". See Space
's add()
function for more details.
a boolean value to bind mouse events if set to true
. If false
, all mouse events will be unbound. Default is true.
A convenient method to bind (or unbind) all touch events in canvas element. All "players" added to this space that implements an action
callback property will receive mouse event callbacks. The types of mouse actions are: "up", "down", "move", "drag", "drop", "over", and "out".
a boolean value to bind touch events if set to true
. If false
, all mouse events will be unbound. Default is true.
Clear the canvas with its background color. Overrides Space's clear
function.
Optionally specify a custom background color in hex or rgba string, or "transparent". If not defined, it will use its bgcolor
property as background color to clear the canvas.
Similiar to clear()
but clear the offscreen canvas instead
Optionally specify a custom background color in hex or rgba string, or "transparent". If not defined, it will use its bgcolor
property as background color to clear the canvas.
Get a new CanvasForm
for drawing
Pause the animation
a boolean value to set if this function call should be a toggle (between pause and resume)
Main play loop. This implements window.requestAnimationFrame and calls it recursively.
Override this play()
function to implemenet your own animation loop.
current time
Main animation function. Call Space.playItems
.
current time
Play animation loop, and then stop after duration
time has passed.
a value in millisecond to specify a time period to play before stopping, or -1
to play forever
Set whether the rendering should be repainted on each frame
a boolean value to set whether to repaint each frame
Remove a player from this Space
an IPlayer that has an animateID
property
Remove all players from this Space
Custom rendering
rendering context
Replay the animation after stop()
. This resets the end-time counter.
You may also use pause()
and resume()
for temporary pause.
This overrides Space's resize
function. It's used as a callback function for window's resize event and not usually called directly. You can keep track of resize events with resize: (bound ,evt)
callback in your player objects (See Space
's add()
function).
a Bound object to resize to
Optionally pass a resize event
Resume the pause animation
Set up various options for CanvasSpace. The opt
parameter is an object with the following fields. This is usually set during instantiation, eg new CanvasSpace(...).setup( { opt } )
an object with optional settings, as follows.
a hex or rgba string to set initial background color of the canvas, or use false
or "transparent" to set a transparent background. You may also change it later with clear()
a boolean to set if a duplicate canvas should be created for offscreen rendering. Default is false
.
a boolean to set whether <canvas>
size should auto resize to match its container's size. You can also set it manually with autoSize()
a boolean to set if device pixel scaling should be used. This may make drawings on retina displays look sharper but may reduce performance slightly. Default is true
.
Specify when the animation should stop: immediately, after a time period, or never stops.
a value in millisecond to specify a time period to play before stopping, or -1
to play forever, or 0
to end immediately. Default is 0 which will stop the animation immediately.
A convenient method to convert the touch points in a touch event to an array of Pt
.
a touch event which contains touches, changedTouches, and targetTouches list
a string to select a touches list: "touches", "changedTouches", or "targetTouches". Default is "touches"
an array of Pt, whose origin position (0,0) is offset to the top-left of this space
Unbind a callback from the event listener
an event string such as "mousedown"
callback function to unbind
Generated using TypeDoc
CanvasSpace is an implementation of the abstract class Space. It represents a space for HTML Canvas. Learn more about the concept of Space in this guide