Canvallax

Class: Group

canvallax. Group

An array-like collection of canvallax elements.

new Group()

Control a group of element's positioning and transforms together

Mixes In:
Source:

Members

.clip :function|canvallax.Element

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

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

extend :function

Set multiple properties of an object

Type:
  • function
Mixes In:
Source:

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>
Mixes In:
Default Value:
  • center center
Source:

Methods

add(element)

Add an element, group or array of elements to collection

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

Element or array of elements to be added
Source:
Returns:
Type
this

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
Mixes In:
Source:
Returns:
Type
this
Example
var scene = canvallax.Scene(),
    rect = canvallax.Rectangle();

rect.addTo(scene);

.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
Mixes In:
Source:

getCanvas()

Get the canvas the object is rendering onto

Mixes In:
Source:

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
Mixes In:
Source:
Returns:
Type
this

.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
Mixes In:
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 });

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
Mixes In:
Source:

.init()

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

Mixes In:
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
Mixes In:
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
Mixes In:
Source: