An attemp to integrate OL3 and PaperJS

<!DOCTYPE html>
<html>

  <head>
    <link data-require="OpenLayers@3.4.0" data-semver="3.4.0" rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" />
    <link rel="stylesheet" href="style.css" />
    <style>
        #mapa{
            position:absolute;
            z-index:10;
            width:100%;
            height:100%;
            top:0; left:0;
        }
        canvas { 
            position: absolute; 
            top: 0; left: 0; 
            height: 100%; width: 100%;
            z-index: 11; 
            pointer-events:none;
        }
    </style>
  </head>

  <body>
    <div id="mapa"></div>
    <canvas id="paper"></canvas>
    <script data-require="OpenLayers@3.4.0" data-semver="3.4.0" src="http://openlayers.org/en/v3.4.0/build/ol.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-full.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

var olview = new ol.View({
    center: [-5538278.518201076, -1540884.5812734526],
    zoom: 4,
    minZoom: 1,
    maxZoom: 20
});
var layerBing = new ol.layer.Tile({
    preload: 4,
    source: new ol.source.BingMaps({
        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
        imagerySet: 'AerialWithLabels'
    })
});
var map = new ol.Map({
    target: document.getElementById('mapa'),
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,
    view: olview,
    renderer: 'canvas',
    layers: [layerBing]
});

var canvasFunction = function(extent, resolution, pixelRatio, size, projection) {
    
    var canvasWidth = size[0],
        canvasHeight = size[1],
        center = map.getPixelFromCoordinate(ol.extent.getCenter(extent))
        canvas = document.getElementById("paper");


    paper.setup(canvas);
    paper.view.viewSize = new paper.Size([canvasWidth, canvasHeight]);
    paper.view.center = center;
    
    var from = map.getPixelFromCoordinate([-5538278.518201076, -1540884.5812734526]),
        to = map.getPixelFromCoordinate([-5381735.484273022, -1534769.6190106387]);
    
    var path = new paper.Path.Line({
        from: from,
        to: to,
        strokeWidth: 10,
        strokeColor: 'red',
        fillColor: 'none',
    });
    
    var layer = new paper.Layer({
        children: [path]
    });
    
/*    
    path.scale(20);
    path.selected = true;
    path.transformContent = false;*/
    //path.position = paper.view.center;

    paper.view.onFrame = function(ev){
        path.rotate(5);
        path.scaling.x += 0.1;
        console.info(ev.count);
        
        if(ev.count > 100){
            paper.view.off('frame');
            
        }
    }
  
   
    //paper.view.draw();
    return paper.view.element;
};
    
var layer_canvas = new ol.layer.Image({
    source: new ol.source.ImageCanvas({
        canvasFunction: canvasFunction,
        projection: 'EPSG:3857'
    })
});
map.once("postrender", function() {
    
    map.addLayer(layer_canvas);
    
});
layer_canvas.once('postcompose', function(ev){
    //paper.view.emit('frame');
});