API Docs for: 1.7.3
Show:

Rekapi.CanvasRenderer Class

You can use Rekapi to render animations to an HTML5 <canvas>. To do so, just provide a CanvasRenderingContext2D instance to the Rekapi constructor to automatically set up the renderer:

var context = document.createElement('canvas').getContext('2d');
var rekapi = new Rekapi(context);
rekapi.renderer instanceof Rekapi.CanvasRenderer; // true

Rekapi.CanvasRenderer adds some canvas-specific events you can bind to with on (and unbind from with off:

  • beforeRender: Fires just before an actor is rendered to the canvas.
  • afterRender: Fires just after an actor is rendered to the canvas.

Note: Rekapi.CanvasRenderer is added to the Rekapi instance automatically as this.renderer, there is no reason to call the constructor yourself in most cases.

Multiple renderers

Rekapi supports multiple renderers per instance. Do do this, you must not provide a CanvasRenderingContext2D to the Rekapi constructor, you must instead initialize the renderer yourself. The CanvasRenderingContext2D that would have been provided to the Rekapi constructor instead is provided as the second parameter to Rekapi.CanvasRenderer:

var canvasContext = document.querySelector('canvas').getContext('2d');

// No context gets passed to the Rekapi constructor
var rekapi = new Rekapi();

// Initialize Rekapi.CanvasRenderer manually and give it a
// CanvasRenderingContext2D.  You can name it anything you want on the
// Rekapi instance.
rekapi.canvasRenderer =
    new Rekapi.CanvasRenderer(rekapi, canvasContext);

Constructor

Rekapi.CanvasRenderer

(
  • rekapi
  • opt_context
)

Parameters:

  • rekapi Rekapi
  • opt_context CanvasRenderingContext2D=

Methods

clear

() Rekapi

Erase the <canvas>.

Returns:

height

(
  • opt_height
)
Number

Get and optionally set the height of the associated <canvas> element.

Parameters:

  • opt_height Number=

    The height to optionally set.

Returns:

Number:

moveActorToLayer

(
  • actor
  • layer
)
Rekapi.Actor

Move an actor around within the render order list. Each actor is rendered in order of its layer (layers and actors have a 1:1 relationship). The later an actor is added to an animation (with addActor), the higher its layer. Lower layers (starting with 0) are rendered earlier.

This method has no effect if an order function is set with setOrderFunction.

Example

Parameters:

  • actor Rekapi.Actor
  • layer Number

    This should be within 0 and the total number of actors in the animation. That number can be found with getActorCount.

Returns:

setOrderFunction

(
  • sortFunction
)
Rekapi

Set a function that defines the render order of the actors. This is called each frame before the actors are rendered.

The following example assumes that all actors are circles that have a radius Rekapi.KeyframeProperty. The circles will be rendered in order of the value of their radius, from smallest to largest. This has the effect of layering larger circles on top of smaller circles, thus giving a sense of perspective.

If a render order function is specified, moveActorToLayer will have no effect.

rekapi.renderer.setOrderFunction(function (actor) {
  return actor.get().radius;
});

Example

Parameters:

  • sortFunction function(Rekapi.Actor)

Returns:

unsetOrderFunction

() Rekapi

Remove the order function set by setOrderFunction. The render order defaults back to the order in which the actors were added to the animation.

Example

Returns:

width

(
  • opt_width
)
Number

Get and optionally set the width of the associated <canvas> element.

Parameters:

  • opt_width Number=

    The width to optionally set.

Returns:

Number: