Canvallax

Class: Rectangle

canvallax. Rectangle

new Rectangle(options)

Draw a Rectangle!

Parameters:
Name Type Description
options object

Object containing properties to be applied to the new instance. Reference the properties below.
Properties:
Name Type Default Description
width number null

Width of the rectangle
height number null

Height of the rectangle.
Mixes In:
Source:
Example
var redTriangle = canvallax.Polygon({
       fill: '#F00',
       points: 3,
       width: 100,
       height: 100
     });

Extends

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

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: