Canvallax

Mixin: core

core

Core properties used for most Canvallax objects

Properties:
Name Type Default Description
x number 0

x coordinate, horizontal offset from the left
y number 0

y coordinate, vertical offset from the top
z number 1

z coordinate, scale relative to the parent. Affects the final rendered coordinates.
opacity number 1

Object's opacity with 1 as fully opaque and 0 as fully transparent, with rendering skipped. Relative to the parent's opacity.
scale number 1

How large the object should be rendered relative to its natural size, from the transformOrigin property]
rotation number 0

Amount of rotation in degrees from the transformOrigin property
preRender core.preRender

Callback before the object is rendered.
_render core._render

Object specific callback to render to the context.
postRender core.postRender

Callback after the object is rendered.
Source:

Members

<static> .clip :function|canvallax.Element

Element or custom function to clip object to for masking effects.

Type:
Source:
Example
// circular image!
var circle = canvallax.Ellipse({ width: 100, height: 100 }),
     image = canvallax.Image({ src: 'myimage.jpg', clip: circle });

<static> extend :function

Set multiple properties of an object

Type:
  • function
Source:

<static> transformOrigin :string|Array.<number>

Where the object's transforms will occur, either as an array of coordinates or two keywords separated by a space.

The default of 'center center' means that rotation and scale transforms will be relative to the center of the object's width and height.

As a string, the first keyword can be left, center or right cooresponding to the appropriate horizontal position, and the second keyword can be top, center or bottom cooresponding to the appropriate vertical position.

Type:
  • string | Array.<number>
Default Value:
  • center center
Source:

Methods

<static> addTo(element)

Add object to a parent

Parameters:
Name Type Description
element object | Array.<object>

Parent or array of parents for the object to be added to
Source:
Returns:
Type
this
Example
var scene = canvallax.Scene(),
    rect = canvallax.Rectangle();

rect.addTo(scene);

<static> .from(duration, fromProperties, options)

Animate an object's properties from values. See canvallax.Animate.from for more details.

Parameters:
Name Type Description
duration number

Duration in seconds
fromProperties object

Properties & values to animate from
options object

Animation specific options
Source:

<static> getCanvas()

Get the canvas the object is rendering onto

Source:

<static> render(ctx, parent)

Main rendering function that calls all callbacks, sets the context alpha & blend, and renders children, if any.

Parameters:
Name Type Description
ctx CanvasRenderingContext2D

2d canvas context
parent canvallax.Scene | canvallax.Group

Parent object, usually a canvallax.Scene
Source:
Returns:
Type
this

<static> set(target)

Extend an object with properties from other objects.

If only one argument is provided, the target is assumed to be this in the current context.

Parameters:
Name Type Argument Description
target object

Target object to receive properties from the other objects.
object <repeatable>

Objects to merge
Source:
Returns:
  • Object with merged properties
Type
object

<static> .to(duration, toProperties, options)

Animate an object's properties to new values. See canvallax.Animate for more details.

Parameters:
Name Type Description
duration number

Duration in seconds
toProperties object

Properties & values to animate to
options object

Animation specific options
Source:
Example
// Make a square spin forever
var redSquare = canvallax.Rectangle({ fill: '#F00', width: 100, height: 100 });
redSquare.to(1, { rotation: 360 },{ ease: canvallax.ease.linear, repeat: -1 });

##fromTo(duration, fromProperties, toProperties, options)

Animate an object's properties from values to another set of values. See canvallax.Animate.fromTo for more details.

Parameters:
Name Type Description
duration number

Duration in seconds
fromProperties object

Properties & values to animate from
toProperties object

Properties & values to animate to
options object

Animation specific options
Source:

Type Definitions

._render(ctx, parent)

Object specific rendering callback

Parameters:
Name Type Description
ctx CanvasRenderingContext2D

2d canvas context
parent canvallax.Scene | canvallax.Group

Parent object, usually a canvallax.Scene
Source:

.init()

Callback function triggered when an intance is first created. Receives all arguments passed to the Object's creation function.

Source:

.postRender(ctx, parent)

Callback after the object is rendered.

Parameters:
Name Type Description
ctx CanvasRenderingContext2D

2d canvas context
parent canvallax.Scene | canvallax.Group

Parent object, usually a canvallax.Scene
Source:

.preRender(ctx, parent)

Callback before the object is rendered. Ideal for updating properties before object is drawn to canvas.

Parameters:
Name Type Description
ctx CanvasRenderingContext2D

2d canvas context
parent canvallax.Scene | canvallax.Group

Parent object, usually a canvallax.Scene
Source: