canvas/animation
Interfaces
AnimationCanvasInstance
Defined in: dom/src/canvas/animation.ts:83
Properties
destroy
destroy: () => void;
Defined in: dom/src/canvas/animation.ts:99
Returns
void
redraw
redraw: () => void;
Defined in: dom/src/canvas/animation.ts:97
Draw one frame now, whether or not animate is on.
Returns
void
update
update: (options) => void;
Defined in: dom/src/canvas/animation.ts:94
Replace the given options. Lets a wrapper feed a fresh draw in on every
render without restarting the animation, so the frame count and the
elapsed time keep running.
relativeSize and contextAttributes are fixed for the lifetime of the
instance and are ignored here.
While animate is off this also draws a frame, since nothing else would.
Parameters
| Parameter | Type |
|---|---|
options | Partial<AnimationCanvasOptions> |
Returns
void
AnimationCanvasOptions
Defined in: dom/src/canvas/animation.ts:34
Properties
animate?
optional animate?: boolean;
Defined in: dom/src/canvas/animation.ts:47
Keep drawing on every animation frame. When off, a frame is drawn only on a resize or an explicit AnimationCanvasInstance.redraw.
Default
true
contextAttributes?
optional contextAttributes?: CanvasRenderingContext2DSettings;
Defined in: dom/src/canvas/animation.ts:80
Passed to getContext('2d', …). Read once when the context is created, so
it is fixed for the lifetime of the instance.
See
https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
draw
draw: CanvasDrawFunction;
Defined in: dom/src/canvas/animation.ts:36
Called for every frame.
init?
optional init?: CanvasInitFunction;
Defined in: dom/src/canvas/animation.ts:39
Called once, after the first size is known and before the first frame.
reduceFlickering?
optional reduceFlickering?: boolean;
Defined in: dom/src/canvas/animation.ts:72
Carry the drawing across a resize, so that the canvas does not blank for a frame while the new size is drawn.
Default
true
relativeSize?
optional relativeSize?: boolean;
Defined in: dom/src/canvas/animation.ts:64
Follow the size of the canvas's parent element instead of size.
Fixed for the lifetime of the instance: it decides whether a
ResizeObserver is attached.
Default
false
size?
optional size?: object;
Defined in: dom/src/canvas/animation.ts:54
Size in CSS pixels. Ignored when relativeSize is on.
height
height: number;
width
width: number;
Default
{ width: 100, height: 100 }
AnimationFrame
Defined in: dom/src/canvas/animation.ts:9
What the canvas looked like when a frame was drawn.
Properties
count
count: number;
Defined in: dom/src/canvas/animation.ts:15
Frames drawn so far, starting at 0.
deltaTime
deltaTime: number;
Defined in: dom/src/canvas/animation.ts:17
Milliseconds since the previous frame.
elapsedTime
elapsedTime: number;
Defined in: dom/src/canvas/animation.ts:19
Milliseconds since the instance was created.
fps
fps: number;
Defined in: dom/src/canvas/animation.ts:21
Frames per second implied by deltaTime.
height
height: number;
Defined in: dom/src/canvas/animation.ts:13
Height of the canvas in CSS pixels.
width
width: number;
Defined in: dom/src/canvas/animation.ts:11
Width of the canvas in CSS pixels.
Type Aliases
CanvasDrawFunction
type CanvasDrawFunction = (context, frame) => void;
Defined in: dom/src/canvas/animation.ts:24
Parameters
| Parameter | Type |
|---|---|
context | CanvasRenderingContext2D |
frame | AnimationFrame |
Returns
void
CanvasInitFunction
type CanvasInitFunction = (context, size) => void;
Defined in: dom/src/canvas/animation.ts:29
Parameters
| Parameter | Type |
|---|---|
context | CanvasRenderingContext2D |
size | { height: number; width: number; } |
size.height | number |
size.width | number |
Returns
void
Functions
createAnimationCanvas()
function createAnimationCanvas(canvas, options): AnimationCanvasInstance;
Defined in: dom/src/canvas/animation.ts:110
Drive a canvas from requestAnimationFrame, keeping its backing store in
step with the device pixel ratio and, optionally, with the size of its
parent.
Drawing code works in CSS pixels: the context is scaled by the device pixel
ratio, and width / height of each AnimationFrame are CSS pixels.
Parameters
| Parameter | Type |
|---|---|
canvas | HTMLCanvasElement |
options | AnimationCanvasOptions |