Panzoom.js и paper.js, компенсирующие точку для масштаба

Question

Намерение состоит в том, чтобы разместить изображение на холсте и рисовать на нем, одновременно используя возможности панорамирования и масштабирования. Я использую panzoom.js и paper.js

Что работает.... Я могу панорамировать и масштабировать холст. Я могу рисовать на холстах

Что не работает... как только я изменяю масштаб изображения - дела идут плохо. бумажная "точка" больше не соответствует стрелке мыши. после увеличения какой-то фактор кажется отключенным, а то, что нарисовано на экране, находится на некотором расстоянии от указателя

Как мне компенсировать точку paper.js для коэффициента масштабирования на холсте?

HTML

<div id="container">
    <canvas id="myImage" width="612" height="792px">
        <img id="page" src="page.png" width="100%" height="100%">
    </canvas>
</div>
<img id="first" src="page.png" width="612" height="792" style="display:none">

Для panzoom.js..

var $panzoom = $('#myImage').panzoom();

$panzoom.parent().on('mousewheel.focal', function( e ) {
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    $panzoom.panzoom('zoom', zoomOut, {
        increment: 0.1,
        animate: false,
        focal: e
    });
  });

и для paper.js...

<script type="text/paperscript" canvas="myImage">

var raster = new Raster('first');
raster.position = view.center;
raster.scale(1);

tool.maxDistance = 10;

function onMouseDrag(event) {
    var circle = new Path.Circle({
        center: event.middlePoint,
        radius: event.delta.length / 2
    });
    circle.fillColor = 'black';
}