Перетаскивание изображения Openseadragon на несколько холстов

У нас есть просмотрщик с кодировкой на openseadragon. Он имеет функции увеличения масштаба дома и поворота. Мы также добавили в это средство просмотра настраиваемый прозрачный холст для рисования фигур на этом изображении. Они отлично работают, но мы не можем перетаскивать эти изображения, а также не можем получить координаты div для этого изображения на этом мультихолсте.

Как мы можем достичь перемещения мыши или событий щелчка и перетаскивания на этом многоканальном холсте.

Спасибо всем за помощь.

Пример кода здесь:

<div class="container">
<div class="area">

    <div id="viewerImage1"
         class="openseadragon">
        <script type="text/javascript">
            var meta = null;
            var viewer = OpenSeadragon({
                id: "viewerImage1",
                prefixUrl: "/openseadragon/images/",
                tileSources: {
                    type: 'image',
                    url: '/openseadragon/images/example-images/sample.jpg'
                }
            });         
        </script>
    </div>
    <canvas id="canvasDrawArea01" class="canvas" width="300" height="250" style="cursor: move;"></canvas>
    <canvas id="canvasDrawArea02" class="canvas" width="300" height="250" style="cursor: move;"></canvas>

</div>
</div>