Showing multiple images using a single cornerstone object

Question

I am trying to implement a view with multiple images loaded (Let's say 4*4 images in one element) using cornerstonejs/ tools. I do not need to save states for these all of the images, except for the first one. For this image, I already have a state manager and a cornerstone element.

As far as I know, there is no tool in cornerstone tools that enables showing multiple images in the same canvas. What would be the correct way going forward implementing this? My idea is to load separate cornerstone objects for separate images, and thus use a different canvas for every image, as shown in this example from here.

<script>
    // image enable the elements
    const mr1 = document.getElementById('mr1');
    cornerstone.enable(mr1);
    const mr2 = document.getElementById('mr2');
    cornerstone.enable(mr2);
    const ct1 = document.getElementById('ct1');
    cornerstone.enable(ct1);
    // load and display the images
    cornerstone.loadAndCacheImage('example://1').then(function(image) {
        cornerstone.displayImage(mr1, image);
    });
    cornerstone.loadAndCacheImage('example://2').then(function(image) {
        cornerstone.displayImage(mr2, image);
    });
    cornerstone.loadAndCacheImage('ctexample://1').then(function(image) {
        cornerstone.displayImage(ct1, image);
    });
</script>

Is there any better way to implement this in a way that I don't have to create cornerstone objects for every image but have independent basic functionality (zoom, pan etc where saving is not needed) for the images.

Answer 1

The best way is as you suggest, to create a separate cornerstone enabled element for each viewport/image/image stack. Cornerstone internally uses the enabled element to track various things like events, image zoom/window/level, as well as sizing the image based on the canvas element, so trying to force multiple images to display in the same element would be very messy.