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 |
- Mixes In:
- Source:
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. |
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:
- function | canvallax.Element
- 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 thatrotation
andscale
transforms will be relative to the center of the object'swidth
andheight
.As a string, the first keyword can be
left
,center
orright
cooresponding to the appropriate horizontal position, and the second keyword can betop
,center
orbottom
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 - 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 - 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: