Canvallax

Class: Image

canvallax. Image

new Image(options)

Image class for drawing an <img> or <canvas> Element on a Canvallax scene.

The element's width and height are set on image load unless already provided.

Parameters:
Name Type Description
options object | string

Object containing properties to be applied to the new canvallax.Image instance, or a string containing the URL of the image src to be used.
Properties:
Name Type Default Description
image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement null

Image element to draw. Will be created on initialization if not provided.
src string null

URL of the image to draw, subject to cross origin policies
width number null

Width of the image. Set onload if not provided.
height number null

Height of the image. Set onload if not provided.
Mixes In:
Source:
Examples
var img = canvallax.Image('myimage.jpg'); // src can be provided as only parameter on init.
var img = canvallax.Image({
         src: 'myimage.jpg'
         width: 300, // Ignore the images actual dimensions, and render at a specific width
         height: 100 // Ignore the images actual dimensions, and render at a specific height
      });

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: