Rekapi ext/canvas/rekapi.canvas.context.js

CanvasRenderer

method
Kapi.CanvasRenderer()
  • @param: {Kapi}kapi
  • @constructor:

Description

You can use Rekapi to render to an HTML5 <canvas>. The Canvas renderer does a few things:

  1. It subclasses Kapi.Actor as Kapi.CanvasActor.
  2. If the Kapi constructor is given a <canvas> as a context, the Canvas renderer attaches an instance of Kapi.CanvasRenderer to the Kapi instance, named canvas, at initialization time. So:
  3. It maintains a layer list that defines draw order for Kapi.CanvasActors.
// With the Rekapi Canvas renderer loaded
var kapi = new Kapi({ context: document.createElement('canvas') });
kapi.canvas instanceof Kapi.CanvasRenderer; // true

Note: This Kapi.CanvasRenderer constructor is called for you automatically - there is no need to call it explicitly.

The Canvas renderer adds some new events you can bind to with Kapi#on (and unbind from with Kapi#off).

  • beforeDraw: Fires just before an actor is drawn to the screen.
  • afterDraw: Fires just after an actor is drawn to the screen.

Source

Kapi.CanvasRenderer = function (kapi) {
    this.kapi = kapi;
    this._drawOrder = [];
    this._drawOrderSorter = null;
    this._canvasActors = {};
    return this;
  };
  var CanvasRenderer = Kapi.CanvasRenderer;

height

method
CanvasRenderer.prototype.height()
  • @param: {number}opt_height
  • @return: {number}

Description

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

Source

CanvasRenderer.prototype.height = function (opt_height) {
    return dimension(this.kapi.context, 'height', opt_height);
  };

width

method
CanvasRenderer.prototype.width()
  • @param: {number}opt_width
  • @return: {number}

Description

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

Source

CanvasRenderer.prototype.width = function (opt_width) {
    return dimension(this.kapi.context, 'width', opt_width);
  };

clear

method
CanvasRenderer.prototype.clear()
  • @return: {Kapi}

Description

Erase the <canvas>.

Source

CanvasRenderer.prototype.clear = function () {
    // TODO: Is this check necessary?
    if (this.kapi.context.getContext) {
      this.context().clearRect(
          0, 0, this.width(), this.height());
    }

    return this.kapi;
  };

context

method
CanvasRenderer.prototype.context()
  • @return: {CanvasRenderingContext2D}

Description

Retrieve the 2d context of the <canvas> that is set as the Kapi instance's rendering context. This is needed for all rendering operations. It is also provided to a Kapi.CanvasActor's draw method, so you mostly won't need to call it directly. See the MDN for info on the Canvas context APIs.

Source

CanvasRenderer.prototype.context = function () {
    return this.kapi.context.getContext('2d');
  };

moveActorToLayer

method
CanvasRenderer.prototype.moveActorToLayer()
  • @param: {Kapi.Actor}actor
  • @param: {number}layer
  • @return: {Kapi.Actor,undefined}

Description

Move a Kapi.CanvasActor around in the layer list. Each layer has one Kapi.CanvasActor, and Kapi.CanvasActors are drawn in order of their layer. Lower layers (starting with 0) are drawn earlier. If layer is higher than the number of layers (which can be found with actorCount) or lower than 0, this method will return undefined. Otherwise actor is returned.

Example

Source

CanvasRenderer.prototype.moveActorToLayer = function (actor, layer) {
    if (layer < this._drawOrder.length) {
      this._drawOrder = _.without(this._drawOrder, actor.id);
      this._drawOrder.splice(layer, 0, actor.id);

      return actor;
    }

    return;
  };

setOrderFunction

method
CanvasRenderer.prototype.setOrderFunction()
  • @param: {function(Kapi.Actor,number)}sortFunction
  • @return: {Kapi}

Description

Set a function that defines the draw order of the Kapi.CanvasActors. This is called each frame before the Kapi.CanvasActors are drawn. The following example assumes that all Kapi.CanvasActors are circles that have a radius Kapi.KeyframeProperty. The circles will be drawn 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, giving a sense of perspective.

kapi.canvas.setOrderFunction(function (actor) {
  return actor.get().radius;
});

Source

CanvasRenderer.prototype.setOrderFunction = function (sortFunction) {
    this._drawOrderSorter = sortFunction;
    return this.kapi;
  };

unsetOrderFunction

method
CanvasRenderer.prototype.unsetOrderFunction()
  • @return: {Kapi}

Description

Remove the sort order function set by setOrderFunction. Draw order defaults back to the order in which Kapi.CanvasActors were added.

Example

Source

CanvasRenderer.prototype.unsetOrderFunction = function () {
    this._drawOrderSorter = null;
    return this.kapi;
  };

});