Using Panzoom with Painterro for zooming in on images

Question

I have a project that has Painterro integration for creating images. I had added Panzoom feature to that image, where by upon shift + mouse scroll event, we zoom the image. But this causes issue with the input layer as after zooming in the input layer is not scaled to the zoomed image. I looked deeper and found that the Painterro plugin uses 3 different layers. The layer i currently zoom is the main canvas that holds the image, which zooms successfully but the input layer is not scaled when zoomed. How can i make it so that when panzoom zooms the canvas element, the input layer is also scaled to size.

    /* zoom feature */
    var element = $(".ptro-scroller .ptro-center-tablecell canvas");
    var panzoom = Panzoom(element[0], {
        maxScale: 5,
        minScale:1,
        animate:false,
        contain:'inside',
        disableYAxis:true
    });

    /* Enabling zoom*/
    var parent = element[0].parentElement;
    parent.addEventListener('wheel', function(event) {
        if (!event.shiftKey) return;
        panzoom.zoomWithWheel(event);
    });