Canvallax Elements

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

Elements don't really do anything by themselves, they need to be added to a Canvallax instance using the add function.

  var myCanvallax = Canvallax(),
      circle = Canvallax.Circle();
      
  myCanvallax.add(circle);

Properties

All Canvallax elements have these properties, with the default values shown:

  Canvallax.Element({
  
    x: 0, 
    // (Number)
    // Horizontal position within the Canvallax canvas
    
    y: 0,
    // (Number) 
    // Vertical position within the Canvallax canvas
    
    distance: 1, 
    // (Number)
    // How far away from the camera, essentially controlling the speed of the elements movement.
    // If `scale` is not set to `false`, the element's distance value also affects the size, making elements appear closer or farther away.
    // `1` means the element will move at the same speed as the Canvallax instance, `0.5` means half speed, `2` means twice the speed.
    
    fixed: false, 
    // (Boolean)
    // If `false`, the element will move with Canvallax
    // If `true`, the element will remain locked into its `x` and `y` positions.

    opacity: 1,
    // (Number)
    // Element's transparency. `0` is invisible, `1` is fully visible.
    
    fill: false,
    // (Color||`false`)
    // Fill in the element with a color.
    
    stroke: false,
    // (Color||`false`)
    // Add a stroke to the element.
    
    lineWidth: false,
    // (Number)
    // Width of the stroke.

    transformOrigin: 'center center',
    // (String)
    // Where the element's transforms will occur, two keywords separated by a space.
    // The default of `'center center'` means that `rotation` and `scale` transforms will occur from the center of the element.
    // The first keyword can be `left`, `center` or `right` cooresponding to the appropriate horizontal position.
    // The second keyword can be `top`, `center` or `bottom` cooresponding to the appropriate vertical position.
    
    scale: 1,
    // (Number||`false`)
    // How large the element should be rendered relative to its natural size, affected by the `transformOrigin` property.
    // Scaling will be in addition to the `distance` property's scaling.
    // If `false`, the element will not be scaled with the `distance` property.
    
    rotation: 0,
    // (Number)
    // Amount of rotation in degrees (0-360), affected by the `transformOrigin` property.

    preRender: noop,
    // (Function)
    // Arguments: (C.context,C) where C is the Canvallax instance that the element is being rendered on.
    // Callback function triggered before the element is rendered.
    
    render: noop,
    // (Function)
    // Arguments: (C.context,C) where C is the Canvallax instance that the element is being rendered on.
    // Callback function to actually draw the element.
    // If you're using a built-in element type, you usually won't want to overwrite this.
        
    postRender: noop,
    // (Function)
    // Arguments: (C.context,C) where C is the Canvallax instance that the element is being rendered on.
    // Callback function triggered after the element is rendered.
    
    init: noop,
    // (Function)
    // Callback function triggered when the element is first created. 
    // Receives all arguments passed to the element's creation function.
    
    crop: false,
    // (Object||Function)
    // Crop the element by providing an object with the `x`, `y`, `width` and `height` of a rectangle, relative to the canvas origin.
    // A callback function can also be used to draw the path for cropping the element.
    
  });
  

Methods

• .clone(properties) Create a copy of an element, optionally with new properties added.
• .getTransformPoint() gets the point relative to the element's transformOrigin. This is called on element render to ensure rotation and scale happen at the right point. The return value is cached unless relevant properties change.