How ensure 1:1 pixels in original and rendered image in Cornerstone3D

Support
1

I want to use cornerstone to render a 2D image into a canvas so that there is a 1:1 match between pixels in the original DICOM and the pixels in the rendered image.
It looks like the ‘SCALE’ type of displayArea used in viewport.setDisplayArea might be the right approach. Is this correct?

At the moment when I try

        renderingEngine.getViewport("ID").setDisplayArea({
            type: 'SCALE',
            scale: 1.0,
            imageCanvasPoint: {
                imagePoint: [0.5, 0.5],
                canvasPoint: [0.5, 0.5]
            },
            storeAsInitialCamera: true
        });

I get “TypeError: Cannot read properties of undefined (reading ‘getSpacing’) at ga.setDisplayAreaScale …”

See Test Cornerstone using SCALE displayArea - JSFiddle - Code Playground

Or index.html I use directly in browser:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="data:," /> <!-- avoid favicon request -->
</head>

<body style="margin:0px; overflow:hidden">
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div style="width:522px; height:522px; background: #88AA88;">
        <div id="mount-point" style="display: grid; width:256px; height:256px; position:relative; top:5px; left:5px;">
        </div>
    </div>

</body>

<script
    src="https://cdn.jsdelivr.net/npm/@cornerstonejs/dicom-image-loader@1.84.4/dist/cornerstoneDICOMImageLoader.bundle.min.js"></script>
<script src="
    https://cdn.jsdelivr.net/npm/dicom-parser@1.8.21/dist/dicomParser.min.js"></script>

<script type="module">
    import * as cornerstone from 'https://esm.run/@cornerstonejs/core';

    cornerstoneDICOMImageLoader.external.cornerstone = cornerstone;
    cornerstoneDICOMImageLoader.external.dicomParser = dicomParser;

    var config = {
        maxWebWorkers: navigator.hardwareConcurrency || 1,
        startWebWorkersOnDemand: true,
        taskConfiguration: {
            'decodeTask': {
                initializeCodecsOnStartup: false,
                usePDFJS: false
            }
        }
    };
    cornerstoneDICOMImageLoader.webWorkerManager.initialize(config);

    const imageTestPattern = "wadouri:https://raw.githubusercontent.com/cornerstonejs/cornerstone3D/main/packages/dicomImageLoader/testImages/TestPattern_JPEG-Baseline_YBR422.dcm";

    let renderingEngine;
    cornerstone.init().then(() => {
        renderingEngine = new cornerstone.RenderingEngine();
        renderingEngine.enableElement({
            viewportId: "ID",
            type: cornerstone.Enums.ViewportType.STACK,
            element: document.getElementById("mount-point"),
            defaultOptions: {},
        });

        // The following fails - although it looks same as config set in
        // https://github.com/cornerstonejs/cornerstone3D/blob/c1aac28a21231af731e8e3ea014a99f012c44931/packages/tools/examples/resize/index.ts
        // (Comment it out we get a render from cornerstone)
        renderingEngine.getViewport("ID").setDisplayArea({
            type: 'SCALE',
            scale: 1.0,
            imageCanvasPoint: {
                imagePoint: [0.5, 0.5],
                canvasPoint: [0.5, 0.5]
            },
            storeAsInitialCamera: true
        });

    }).then(() => {
        const viewport = renderingEngine.getViewport("ID");
        viewport.setStack([imageTestPattern]);
    });
</script>

</html>