Canvallax

Mixin: Element

canvallax. Element

Elements are everything drawn on the Canvallax canvas. Element instances can be created either by calling new canvallax.Element or simply canvallax.Element.

canvallax.Element is a class that doesn't do much by itself, but rather is the framework for the other elements like canvallax.Ellipse and canvallax.Image, and allows you to create your own custom elements.

In order to be rendered, Canvallax Element instances need to have a draw function and be added to a canvallax.Scene or canvallax.Group. Most elements will also need a fill or stroke to be visible.

Properties:
Name Type Default Description
parent canvallax.Scene | canvallax.Group null

Parent object, automatically assigned when added to a canvallax.Scene or canvallax.Group.
fill string null

Fill color
stroke string null

Stroke color
lineWidth number 1

Width of the stroke, if stroke is set.
zIndex number null

Stacking order of the element, higher numbers are rendered last making them appear on top of lower zIndex elements. Defaults to z property
fixed boolean null

If false, the element will be relative to parent, otherwise it will render fixed on the canvas.
Mixes In:
Source:

Example

var scene = canvallax.Scene(),
    rect = canvallax.Rectangle(); // A type of canvallax.Element

scene.add(rect);

Members

<static> .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 });

<static> extend :function

Set multiple properties of an object

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

<static> getCanvas()

Get the canvas the object is rendering onto

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

<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
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:

.draw(ctx, coords, parent)

Callback to draw the element on the context.

Parameters:
Name Type Description
ctx CanvasRenderingContext2D

2d canvas context
coords array

Array of the calculated x and y coordinates
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.

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: