The on method attaches event handlers to the currently selected set of elements in the CanvasEngine object.

General Event

Some names are defined as follows: namespace:eventname. For example, there are the following event in CanvasEngine:

stage.on("canvas:refresh", function(el) { // stage is defined in the scene

At each refresh of the scene, to display each element is returned.

  • canvas:refresh Calling the event only stage to each refresh of an element
  • canvas:render Call each rendering the element
  • canvas:readyEnd Call at the end of the execution of the ready method in the scene
  • element:attrChange (>=1.3.2) Called when an attribute of an element is changed

    el.on("element:attrChange", function(name, value) { if (name == "myattr") { console.log("new value : " + value); } }); el.attr("myattr", "foo");

  • animation:draw Call each sequence. Id parameter sequence

    el.on("animation:draw", function(id) {

Mouse Events

You can retrieve the mouse events

  • click
  • dbclick
  • mousemove
  • mouseup
  • mousedown
  • mouseout
  • mouseover

For mouseover and mouseout, you must give size to the element (in ready method)

var el = this.createElement(300, 300);


var el = this.createElement();
el.width = 300;
el.height = 300;

Apply on a specific element :

var el = this.createElement();
el.on("click", function(e, mouse) {
    this.opacity = 0.5;

** Callback parameter **

  • event {Event} : a mouse event
  • mouse {Object} (>= 1.2.6) : Position the mouse on the canvas. {x: , y: }

Example :

stage.on("mousemove", function(e, mouse) {
    console.log(mouse.x, mouse.y);

Events with Hammer.js

Other events suitable for tablet and smartphone exist available in Hammer.js :

  • hold
  • tap
  • doubletap
  • drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
  • swipe, swipeup, swipedown, swipeleft, swiperight
  • transform, transformstart, transformend
  • rotate
  • pinch, pinchin, pinchout
  • touch (gesture detection starts)
  • release (gesture detection ends)

    var el = this.createElement();
    el.on("drag", function(e, mouse) {
        this.x = e.distanceX;
        this.y = e.distanceY;

If you use the click event, it will be replaced by touch for touch devices




  • events {String}

    One or more space-separated event types and optional namespaces, such as "click" or "mouseover"

  • callback(event) {Function}

    A function to execute when the event is triggered