Canvallax

Class: styles

canvallax. styles

new styles(options)

Canvallax Scenes are where elements are rendered, essentially a fancy wrapper for a <canvas> element.

If you're using the default fullscreen setup, then you probably want these styles:

.canvallax {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
Parameters:
Name Type Description
options object

Object containing properties to be applied to the new canvallax.Scene instance. Reference the properties below for
Properties:
Name Type Default Description
canvas HTMLCanvasElement null

<canvas> element the scene should be rendered on. Creates a new <canvas> by default
parentElement node document.body

Node the <canvas> should be appended to upon initialization.
className string null

Classes to add to the canvas, in addition to the 'canvallax' class automatically added.
fullscreen boolean true

Set the canvas width and height to the size of the window, and update on window resize.
clearFrames boolean true

Should the canvas be cleared before rendering?
width number null

Width of the <canvas>, set automatically if fullscreen is true or a <canvas> element is provided
height number null

Heightof the <canvas>, set automatically if fullscreen is true or a <canvas> element is provided
playing boolean true

If true, the scene will be re-rendered each requestAnimationFrame
Mixes In:
Source:
Example
// draw scene to an existing `<canvas>`.
var scene = canvallax.Scene({
          fullscreen: false,
       canvas: document.getElementById('#myCanvas')
     });

Extends

Members

.clip :function|canvallax.Element

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

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

getCanvas()

Get the canvas the object is rendering onto

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

.init()

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

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