paperjs canvas overlay for openseadragon
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 12 commits ahead, 19 commits behind altert:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
openseadragon first commit Feb 9, 2016
.gitignore ignore espresso files Feb 10, 2016
LICENSE add link to Paper.js home page May 13, 2016
openseadragon-paperjs-overlay.js Support Paper.js instead of Fabric.js May 3, 2016
package.json Support Paper.js instead of Fabric.js May 3, 2016


An OpenSeadragon plugin that adds Paper.js overlay capability.

Compatible with OpenSeadragon 2.0.0 or greater.

License: The BSD 3-Clause License. The software was forked from OpenseadragonFabricjsOverlay, that also is licensed under the BSD 3-Clause License.

##Demo web page

See the online demo where some Paper.js circles are shown on top of an OpenSeadragon window. The circles can be dragged with the mouse.


To use, include the openseadragon-paperjs-overlay.js file after openseadragon.js on your web page.

To add Paper.js overlay capability to your OpenSeadragon Viewer, call paperjsOverlay() on it.

    var viewer = new OpenSeadragon.Viewer(...);
    var overlay = viewer.paperjsOverlay();

This will return a new object with the following methods:

  • paperjsCanvas(): Returns Paper.js canvas that you can add elements to
  • resize(): If your viewer changes size, you'll need to resize the Paper.js overlay by calling this method.

##Add drag support Functionality for dragging Paper.js objects can be added by using OpenSeadragon.MouseTracker

    new OpenSeadragon.MouseTracker({
        element: viewer.canvas,
        pressHandler: press_handler,
        dragHandler: drag_handler,
        dragEndHandler: dragEnd_handler

together with these callbacks

var hit_item = null;
var drag_handler = function(event) {
    if (hit_item) {
	var transformed_point1 = paper.view.viewToProject(new paper.Point(0,0));
        var transformed_point2 = paper.view.viewToProject(new paper.Point(,;
        hit_item.position = hit_item.position.add(transformed_point2.subtract(transformed_point1));
var dragEnd_handler = function(event) {
    if (hit_item) {
    hit_item = null;
var press_handler = function(event) {
    hit_item = null;
    var transformed_point = paper.view.viewToProject(new paper.Point(event.position.x, event.position.y));
    var hit_test_result = paper.project.hitTest(transformed_point);
    if (hit_test_result) {
        hit_item = hit_test_result.item;

As a side-note: My first attempt to implement drag support failed. During that attempt I didn't use OpenSeadragon.MouseTracker but instead the mouse event callbacks inside Paper.js. I noticed, though, that the onMouseUp callback was never called and the onMouseDrag callback was called at the wrong time. The failed approach looked something like this:

var x_coord = 100;
var y_coord = 100;
var radius = 20;
var circle = new paper.Path.Circle(new paper.Point(x_coord, y_coord), radius);
circle.onMouseDown = function(event) {
circle.onMouseUp = function(event) {
circle.onMouseDrag = function(event) {

Note: The file package.json was modified to reflect the change from Fabric.js to Paper.js. But the file has not been tested.