This page is work-in-progress. You can reach me on twitter or mail to rezoner1337@gmail.com

Pointer

Pointer combines mouse and touch events into one normalized input.

All pointer events share such properties:

event.x       /* pointer x position */
event.y       /* pointer y position */
event.id      /* pointer unique identifier */

event.mouse   /* is pointer a mouse */
event.touch   /* is pointer a touch */

List of pointer events and their properties specific to devices:

playground({

  pointermove: function(event) {

  },

  pointerdown: function(event) {

    event.button    /* mouse button "left", "right", "middle" */

  },

  pointerup: function(event) {

    event.button    /* mouse button "left", "right", "middle" */

  },

  pointerwheel: function(event) {

    event.delta     /* -1 or 1 */
    event.original  /* original DOM event */

  }

});

You also have access to all current pointers through this.pointers

It is an object so use for var in to iterate:

for(var id in this.pointers) {

}

Details

  1. For mouse event.id = 255
  2. Mouse emulation is prevented on touch enabled devices. A finger will not fire the same pointer event twice

Test

Every pointer (mouse, touch) should be visible as a white circle.

playground({

  render: function() {

    this.layer.a(0.1).clear("#000").ra();

    for(var key in this.pointers) {

      var pointer = this.pointers[key];

      this.layer.fillStyle("#fff").fillCircle(pointer.x, pointer.y, 64);

    }

  },

  container: exampleContainer

})

Ask question:

Fork me on GitHub