@cornerstonejs/core 2.0.0-beta.6 → 2.0.0-beta.7

package/src/RenderingEngine/VolumeViewport.ts

@@ -1,8 +1,6 @@
 import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
 import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
 
-import { vec3 } from 'gl-matrix';
-
 import cache from '../cache';
 import { MPR_CAMERA_VALUES, RENDERING_DEFAULTS } from '../constants';
 import { BlendModes, OrientationAxis, Events } from '../enums';
@@ -12,11 +10,26 @@ import type {
   IVolumeInput,
   OrientationVectors,
   Point3,
+  EventTypes,
+  ViewReference,
+  ViewReferenceSpecifier,
 } from '../types';
 import type { ViewportInput } from '../types/IViewport';
-import { actorIsA, getClosestImageId, triggerEvent } from '../utilities';
+import {
+  actorIsA,
+  getClosestImageId,
+  getSliceRange,
+  getSpacingInNormalDirection,
+  isImageActor,
+  snapFocalPointToSlice,
+  triggerEvent,
+} from '../utilities';
 import BaseVolumeViewport from './BaseVolumeViewport';
 import setDefaultVolumeVOI from './helpers/setDefaultVolumeVOI';
+import { setTransferFunctionNodes } from '../utilities/transferFunctionUtils';
+import { ImageActor } from '../types/IActor';
+import getImageSliceDataForVolumeViewport from '../utilities/getImageSliceDataForVolumeViewport';
+import { vec3 } from 'gl-matrix';
 
 /**
  * An object representing a VolumeViewport. VolumeViewports are used to render
@@ -33,7 +46,6 @@ class VolumeViewport extends BaseVolumeViewport {
     super(props);
 
     const { orientation } = this.options;
-
     // if the camera is set to be acquisition axis then we need to skip
     // it for now until the volume is set
     if (orientation && orientation !== OrientationAxis.ACQUISITION) {
@@ -74,6 +86,12 @@ class VolumeViewport extends BaseVolumeViewport {
     return super.setVolumes(volumeInputArray, immediate, suppressEvents);
   }
 
+  /** Gets the number of slices the volume is broken up into in the camera direction */
+  public getNumberOfSlices = (): number => {
+    const { numberOfSlices } = getImageSliceDataForVolumeViewport(this);
+    return numberOfSlices;
+  };
+
   /**
    * Creates and adds volume actors for all volumes defined in the `volumeInputArray`.
    * For each entry, if a `callback` is supplied, it will be called with the new volume actor as input.
@@ -111,25 +129,35 @@ class VolumeViewport extends BaseVolumeViewport {
    * @param orientation - The orientation to set the camera to.
    * @param immediate - Whether the `Viewport` should be rendered as soon as the camera is set.
    */
-  public setOrientation(orientation: OrientationAxis, immediate = true): void {
+  public setOrientation(
+    orientation: OrientationAxis | OrientationVectors,
+    immediate = true
+  ): void {
     let viewPlaneNormal, viewUp;
 
-    if (MPR_CAMERA_VALUES[orientation]) {
-      ({ viewPlaneNormal, viewUp } = MPR_CAMERA_VALUES[orientation]);
-    } else if (orientation === 'acquisition') {
-      ({ viewPlaneNormal, viewUp } = this._getAcquisitionPlaneOrientation());
-    } else {
-      throw new Error(
-        `Invalid orientation: ${orientation}. Use Enums.OrientationAxis instead.`
-      );
-    }
+    // check if the orientation is a string or an object
+    if (typeof orientation === 'string') {
+      if (MPR_CAMERA_VALUES[orientation]) {
+        ({ viewPlaneNormal, viewUp } = MPR_CAMERA_VALUES[orientation]);
+      } else if (orientation === 'acquisition') {
+        ({ viewPlaneNormal, viewUp } = this._getAcquisitionPlaneOrientation());
+      } else {
+        throw new Error(
+          `Invalid orientation: ${orientation}. Use Enums.OrientationAxis instead.`
+        );
+      }
 
-    this.setCamera({
-      viewPlaneNormal,
-      viewUp,
-    });
+      this.setCamera({
+        viewPlaneNormal,
+        viewUp,
+      });
 
-    this.resetCamera();
+      this.viewportProperties.orientation = orientation;
+      this.resetCamera();
+    } else {
+      ({ viewPlaneNormal, viewUp } = orientation);
+      this.applyViewOrientation(orientation);
+    }
 
     if (immediate) {
       this.render();
@@ -181,6 +209,7 @@ class VolumeViewport extends BaseVolumeViewport {
       viewUp,
     });
 
+    this.initialViewUp = viewUp;
     this.resetCamera();
   }
 
@@ -202,7 +231,7 @@ class VolumeViewport extends BaseVolumeViewport {
 
       const mapper = actor.getMapper();
       // @ts-ignore vtk incorrect typing
-      mapper.setBlendMode(blendMode);
+      mapper.setBlendMode?.(blendMode);
     });
 
     if (immediate) {
@@ -216,8 +245,14 @@ class VolumeViewport extends BaseVolumeViewport {
   public resetCamera(
     resetPan = true,
     resetZoom = true,
-    resetToCenter = true
+    resetToCenter = true,
+    resetRotation = false,
+    supressEvents = false
   ): boolean {
+    const { orientation } = this.viewportProperties;
+    if (orientation) {
+      this.applyViewOrientation(orientation, false);
+    }
     super.resetCamera(resetPan, resetZoom, resetToCenter);
 
     this.resetVolumeViewportClippingRange();
@@ -237,7 +272,7 @@ class VolumeViewport extends BaseVolumeViewport {
       const mapper = actorEntry.actor.getMapper();
       const vtkPlanes = mapper.getClippingPlanes();
 
-      if (vtkPlanes.length === 0) {
+      if (vtkPlanes.length === 0 && !actorEntry?.clippingFilter) {
         const clipPlane1 = vtkPlane.newInstance();
         const clipPlane2 = vtkPlane.newInstance();
         const newVtkPlanes = [clipPlane1, clipPlane2];
@@ -259,6 +294,29 @@ class VolumeViewport extends BaseVolumeViewport {
       }
     });
 
+    //Only reset the rotation of the camera if wanted (so we don't reset everytime resetCamera is called) and also verify that the viewport has an orientation that we know (sagittal, coronal, axial)
+    if (
+      resetRotation &&
+      MPR_CAMERA_VALUES[this.viewportProperties.orientation] !== undefined
+    ) {
+      const viewToReset =
+        MPR_CAMERA_VALUES[this.viewportProperties.orientation];
+      this.setCameraNoEvent({
+        viewUp: viewToReset.viewUp,
+        viewPlaneNormal: viewToReset.viewPlaneNormal,
+      });
+    }
+
+    if (!supressEvents) {
+      const eventDetail: EventTypes.CameraResetEventDetail = {
+        viewportId: this.id,
+        camera: this.getCamera(),
+        renderingEngineId: this.renderingEngineId,
+        element: this.element,
+      };
+
+      triggerEvent(this.element, Events.CAMERA_RESET, eventDetail);
+    }
     return true;
   }
 
@@ -272,6 +330,11 @@ class VolumeViewport extends BaseVolumeViewport {
    * the slab thickness to (if not provided, all actors will be affected).
    */
   public setSlabThickness(slabThickness: number, filterActorUIDs = []): void {
+    if (slabThickness < 0.1) {
+      // Cannot render zero thickness
+      slabThickness = 0.1;
+    }
+
     let actorEntries = this.getActors();
 
     if (filterActorUIDs && filterActorUIDs.length > 0) {
@@ -289,25 +352,56 @@ class VolumeViewport extends BaseVolumeViewport {
     const currentCamera = this.getCamera();
     this.updateClippingPlanesForActors(currentCamera);
     this.triggerCameraModifiedEventIfNecessary(currentCamera, currentCamera);
+    this.viewportProperties.slabThickness = slabThickness;
   }
 
   /**
    * Uses the origin and focalPoint to calculate the slice index.
-   * Todo: This only works if the imageIds are properly sorted
+
+
+
+   * Resets the slab thickness of the actors of the viewport to the default value.
+   */
+  public resetSlabThickness(): void {
+    const actorEntries = this.getActors();
+
+    actorEntries.forEach((actorEntry) => {
+      if (actorIsA(actorEntry, 'vtkVolume')) {
+        actorEntry.slabThickness = RENDERING_DEFAULTS.MINIMUM_SLAB_THICKNESS;
+      }
+    });
+
+    const currentCamera = this.getCamera();
+    this.updateClippingPlanesForActors(currentCamera);
+    this.triggerCameraModifiedEventIfNecessary(currentCamera, currentCamera);
+    this.viewportProperties.slabThickness = undefined;
+  }
+
+  /**
+   * Returns the imageId index of the current slice in the volume viewport.
+   * Note: this is not guaranteed to be the same as the slice index in the view
+   * To get the slice index in the view (scroll position), use getSliceIndex()
+   *
+   * In future we will even delete this method as it should not be used
+   * at all.
    *
-   * @returns The slice index
+   * @returns The slice index in the direction of the view
    */
-  public getCurrentImageIdIndex = (): number | undefined => {
+  public getCurrentImageIdIndex = (volumeId?: string): number => {
     const { viewPlaneNormal, focalPoint } = this.getCamera();
 
-    // Todo: handle scenario of fusion of multiple volumes
-    // we cannot only check number of actors, because we might have
-    // segmentations ...
-    const { origin, spacing } = this.getImageData();
+    const imageData = this.getImageData(volumeId);
 
-    // how many steps are from the origin to the focal point in the
-    // normal direction
-    const spacingInNormal = spacing[2];
+    if (!imageData) {
+      return;
+    }
+
+    const { origin, direction, spacing } = imageData;
+
+    const spacingInNormal = getSpacingInNormalDirection(
+      { direction, spacing },
+      viewPlaneNormal
+    );
     const sub = vec3.create();
     vec3.sub(sub, focalPoint, origin);
     const distance = vec3.dot(sub, viewPlaneNormal);
@@ -317,6 +411,21 @@ class VolumeViewport extends BaseVolumeViewport {
     return Math.round(Math.abs(distance) / spacingInNormal);
   };
 
+  /**
+   * Returns the image index associated with the volume viewport in the current view, the difference
+   * between this method and getCurrentImageIdIndex is that this method returns the index of the
+   * slice in the volume in view direction so at the top (scrollbar top) of the viewport the index
+   * will be 0 and at the bottom (scrollbar bottom) the index will be the number of slices - 1.
+   * But the getCurrentImageIdIndex returns the index of current image in the imageIds
+   * which is not guaranteed to be the same as the slice index in the view.
+   *
+   * @returns The image index.
+   */
+  public getSliceIndex = (): number => {
+    const { imageIndex } = getImageSliceDataForVolumeViewport(this);
+    return imageIndex;
+  };
+
   /**
    * Uses viewport camera and volume actor to decide if the viewport
    * is looking at the volume in the direction of acquisition (imageIds).
@@ -326,14 +435,6 @@ class VolumeViewport extends BaseVolumeViewport {
    * @returns ImageId
    */
   public getCurrentImageId = (): string | undefined => {
-    if (this.getActors().length > 1) {
-      console.warn(
-        `Using the first/default actor of ${
-          this.getActors().length
-        } actors for getCurrentImageId.`
-      );
-    }
-
     const actorEntry = this.getDefaultActor();
 
     if (!actorEntry || !actorIsA(actorEntry, 'vtkVolume')) {
@@ -352,8 +453,26 @@ class VolumeViewport extends BaseVolumeViewport {
     return getClosestImageId(volume, focalPoint, viewPlaneNormal);
   };
 
-  getRotation = (): number => 0;
-
+  /**
+   * Gets a view target, allowing comparison between view positions as well
+   * as restoring views later.
+   * Add the referenced image id.
+   */
+  public getViewReference(
+    viewRefSpecifier: ViewReferenceSpecifier = {}
+  ): ViewReference {
+    const viewRef = super.getViewReference(viewRefSpecifier);
+    if (!viewRef?.volumeId) {
+      return;
+    }
+    const volume = cache.getVolume(viewRef.volumeId);
+    viewRef.referencedImageId = getClosestImageId(
+      volume,
+      viewRef.cameraFocalPoint,
+      viewRef.viewPlaneNormal
+    );
+    return viewRef;
+  }
   /**
    * Reset the viewport properties to the default values
    *
@@ -377,6 +496,13 @@ class VolumeViewport extends BaseVolumeViewport {
       throw new Error(`No actor found for the given volumeId: ${volumeId}`);
     }
 
+    // if a custom slabThickness was set, we need to reset it
+    if (volumeActor.slabThickness) {
+      volumeActor.slabThickness = RENDERING_DEFAULTS.MINIMUM_SLAB_THICKNESS;
+      this.viewportProperties.slabThickness = undefined;
+      this.updateClippingPlanesForActors(this.getCamera());
+    }
+
     const imageVolume = cache.getVolume(volumeActor.uid);
     if (!imageVolume) {
       throw new Error(
@@ -385,22 +511,128 @@ class VolumeViewport extends BaseVolumeViewport {
     }
     setDefaultVolumeVOI(volumeActor.actor as vtkVolume, imageVolume, false);
 
-    const range = (volumeActor.actor as vtkVolume)
-      .getProperty()
-      .getRGBTransferFunction(0)
-      .getMappingRange();
+    if (isImageActor(volumeActor)) {
+      const transferFunction = (volumeActor.actor as ImageActor)
+        .getProperty()
+        .getRGBTransferFunction(0);
+
+      setTransferFunctionNodes(
+        transferFunction,
+        this.initialTransferFunctionNodes
+      );
+    }
 
     const eventDetails = {
-      viewportId: volumeActor.uid,
-      range: {
-        lower: range[0],
-        upper: range[1],
-      },
-      volumeId: volumeActor.uid,
+      ...super.getVOIModifiedEventDetail(volumeId),
     };
 
+    const resetPan = true;
+    const resetZoom = true;
+    const resetToCenter = true;
+    const resetCameraRotation = true;
+    this.resetCamera(resetPan, resetZoom, resetToCenter, resetCameraRotation);
+
     triggerEvent(this.element, Events.VOI_MODIFIED, eventDetails);
   }
+
+  /**
+   * Retrieves the clipping planes for the slices in the volume viewport.
+   * @returns An array of vtkPlane objects representing the clipping planes, or an array of objects with normal and origin properties if raw is true.
+   */
+  getSlicesClippingPlanes(): Array<{
+    sliceIndex: number;
+    planes: Array<{
+      normal: Point3;
+      origin: Point3;
+    }>;
+  }> {
+    const focalPoints = this.getSlicePlaneCoordinates();
+    const { viewPlaneNormal } = this.getCamera();
+    const slabThickness = RENDERING_DEFAULTS.MINIMUM_SLAB_THICKNESS;
+
+    return focalPoints.map(({ point, sliceIndex }) => {
+      const vtkPlanes = [vtkPlane.newInstance(), vtkPlane.newInstance()];
+
+      this.setOrientationOfClippingPlanes(
+        vtkPlanes,
+        slabThickness,
+        viewPlaneNormal,
+        point
+      );
+
+      return {
+        sliceIndex,
+        planes: vtkPlanes.map((plane) => ({
+          normal: plane.getNormal(),
+          origin: plane.getOrigin(),
+        })),
+      };
+    });
+  }
+
+  /**
+   * Returns an array of 3D coordinates representing the slice plane positions.
+   * It starts by the focal point as a reference point on the current slice that
+   * the camera is looking at, and then it calculates the slice plane positions
+   * by moving the focal point in the direction of the view plane normal back and
+   * forward, and snaps them to the slice.
+   *
+   * @returns An array of Point3 representing the slice plane coordinates.
+   */
+  public getSlicePlaneCoordinates = (): Array<{
+    sliceIndex: number;
+    point: Point3;
+  }> => {
+    const actorEntry = this.getDefaultActor();
+
+    if (!actorEntry?.actor) {
+      console.warn('No image data found for calculating vtkPlanes.');
+      return [];
+    }
+
+    const volumeId = actorEntry.uid;
+    const imageVolume = cache.getVolume(volumeId);
+
+    const camera = this.getCamera();
+    const { focalPoint, position, viewPlaneNormal } = camera;
+    const spacingInNormalDirection = getSpacingInNormalDirection(
+      imageVolume,
+      viewPlaneNormal
+    );
+    const sliceRange = getSliceRange(
+      actorEntry.actor as vtkVolume,
+      viewPlaneNormal,
+      focalPoint
+    );
+
+    // calculate the number of slices that is possible to visit
+    // in the direction of the view back and forward
+    const numSlicesBackward = Math.round(
+      (sliceRange.current - sliceRange.min) / spacingInNormalDirection
+    );
+
+    const numSlicesForward = Math.round(
+      (sliceRange.max - sliceRange.current) / spacingInNormalDirection
+    );
+
+    const currentSliceIndex = this.getSliceIndex();
+    const focalPoints = [];
+
+    for (let i = -numSlicesBackward; i <= numSlicesForward; i++) {
+      const { newFocalPoint: point } = snapFocalPointToSlice(
+        focalPoint,
+        position,
+        sliceRange,
+        viewPlaneNormal,
+        spacingInNormalDirection,
+        i
+      );
+
+      focalPoints.push({ sliceIndex: currentSliceIndex + i, point });
+    }
+
+    return focalPoints;
+  };
 }
 
 export default VolumeViewport;

package/src/RenderingEngine/VolumeViewport3D.ts

@@ -64,6 +64,10 @@ class VolumeViewport3D extends BaseVolumeViewport {
   resetProperties(volumeId?: string): void {
     return null;
   }
+
+  resetSlabThickness(): void {
+    return null;
+  }
 }
 
 export default VolumeViewport3D;

package/src/RenderingEngine/helpers/addImageSlicesToViewports.ts

@@ -0,0 +1,51 @@
+import type {
+  IStackViewport,
+  IStackInput,
+  IRenderingEngine,
+} from '../../types';
+
+/**
+ * For each provided viewport it adds a volume to the viewport using the
+ * provided renderingEngine
+ *
+ *
+ * @param renderingEngine - The rendering engine to use to get viewports from
+ * @param volumeInputs - Array of volume inputs including volumeId. Other properties
+ * such as visibility, callback, blendMode, slabThickness are optional
+ * @param viewportIds - Array of viewport IDs to add the volume to
+ * @param immediateRender - If true, the volumes will be rendered immediately
+ * @returns A promise that resolves when all volumes have been added
+ */
+async function addImageSlicesToViewports(
+  renderingEngine: IRenderingEngine,
+  stackInputs: Array<IStackInput>,
+  viewportIds: Array<string>
+): Promise<void> {
+  // Check if all viewports are volumeViewports
+  for (const viewportId of viewportIds) {
+    const viewport = renderingEngine.getViewport(viewportId);
+
+    if (!viewport) {
+      throw new Error(`Viewport with Id ${viewportId} does not exist`);
+    }
+
+    // if not instance of BaseVolumeViewport, throw
+    if (!(viewport as IStackViewport).addImages) {
+      console.warn(
+        `Viewport with Id ${viewportId} does not have addImages. Cannot add image segmentation to this viewport.`
+      );
+
+      return;
+    }
+  }
+
+  const addStackPromises = viewportIds.map(async (viewportId) => {
+    const viewport = renderingEngine.getViewport(viewportId) as IStackViewport;
+
+    return viewport.addImages(stackInputs);
+  });
+
+  await Promise.all(addStackPromises);
+}
+
+export default addImageSlicesToViewports;

package/src/RenderingEngine/helpers/addVolumesToViewports.ts

@@ -1,6 +1,9 @@
-import { VolumeViewport } from '../';
 import BaseVolumeViewport from '../BaseVolumeViewport';
-import type { IVolumeInput, IRenderingEngine } from '../../types';
+import type {
+  IVolumeViewport,
+  IVolumeInput,
+  IRenderingEngine,
+} from '../../types';
 
 /**
  * For each provided viewport it adds a volume to the viewport using the
@@ -40,7 +43,7 @@ async function addVolumesToViewports(
   }
 
   const addVolumePromises = viewportIds.map(async (viewportId) => {
-    const viewport = renderingEngine.getViewport(viewportId) as VolumeViewport;
+    const viewport = renderingEngine.getViewport(viewportId) as IVolumeViewport;
 
     await viewport.addVolumes(volumeInputs, immediateRender, suppressEvents);
   });

package/src/RenderingEngine/helpers/cpuFallback/rendering/renderPseudoColorImage.ts

@@ -8,10 +8,7 @@ import storedPixelDataToCanvasImageDataPseudocolorLUT from './storedPixelDataToC
 import storedPixelDataToCanvasImageDataPseudocolorLUTPET from './storedPixelDataToCanvasImageDataPseudocolorLUTPET';
 import * as colors from '../colors/index';
 import type { IImage, CPUFallbackEnabledElement } from '../../../../types';
-
-function clamp(value: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, value));
-}
+import { clamp } from '../../../../utilities';
 
 /**
  * Returns an appropriate canvas to render the Image. If the canvas available in the cache is appropriate

package/src/RenderingEngine/helpers/createVolumeActor.ts

@@ -34,7 +34,7 @@ async function createVolumeActor(
   element: HTMLDivElement,
   viewportId: string,
   suppressEvents = false,
-  use16BitTexture = false
+  useNativeDataType = false
 ): Promise<VolumeActor> {
   const { volumeId, callback, blendMode } = props;
 
@@ -66,13 +66,7 @@ async function createVolumeActor(
     volumeActor.getProperty().setIndependentComponents(false);
   }
 
-  // If the volume is composed of imageIds, we can apply a default VOI based
-  // on either the metadata or the min/max of the middle slice. Example of other
-  // types of volumes which might not be composed of imageIds would be e.g., nrrd, nifti
-  // format volumes
-  if (imageVolume.imageIds) {
-    await setDefaultVolumeVOI(volumeActor, imageVolume, use16BitTexture);
-  }
+  await setDefaultVolumeVOI(volumeActor, imageVolume, useNativeDataType);
 
   if (callback) {
     callback({ volumeActor, volumeId });

package/src/RenderingEngine/helpers/getOrCreateCanvas.ts

@@ -1,5 +1,6 @@
 const VIEWPORT_ELEMENT = 'viewport-element';
 const CANVAS_CSS_CLASS = 'cornerstone-canvas';
+export const EPSILON = 1e-4;
 
 /**
  * Create a canvas and append it to the element
@@ -13,6 +14,7 @@ function createCanvas(element: Element | HTMLDivElement): HTMLCanvasElement {
   canvas.style.position = 'absolute';
   canvas.style.width = '100%';
   canvas.style.height = '100%';
+  canvas.style.imageRendering = 'pixelated';
   canvas.classList.add(CANVAS_CSS_CLASS);
   element.appendChild(canvas);
 
@@ -30,6 +32,8 @@ export function createViewportElement(element: HTMLDivElement): HTMLDivElement {
   div.style.position = 'relative';
   div.style.width = '100%';
   div.style.height = '100%';
+  // Hide any canvas elements not viewable
+  div.style.overflow = 'hidden';
   div.classList.add(VIEWPORT_ELEMENT);
   element.appendChild(div);
 
@@ -39,6 +43,12 @@ export function createViewportElement(element: HTMLDivElement): HTMLDivElement {
 /**
  * Create a canvas or returns the one that already exists for a given element.
  * It first checks if the element has a canvas, if not it creates one and returns it.
+ * The canvas is updated for:
+ *   1. width/height in screen pixels to completely cover the div element
+ *   2. CSS width/height in CSS pixels to be the size of the physical screen pixels
+ *      width and height (from #1)
+ * This allows drawing to the canvas and having pixel perfect/exact drawing to
+ * the physical screen pixels.
  *
  * @param element - An HTML Element
  * @returns canvas a Canvas DOM element
@@ -54,5 +64,26 @@ export default function getOrCreateCanvas(
   const internalDiv =
     element.querySelector(viewportElement) || createViewportElement(element);
 
-  return internalDiv.querySelector(canvasSelector) || createCanvas(internalDiv);
+  const canvas = (internalDiv.querySelector(canvasSelector) ||
+    createCanvas(internalDiv)) as HTMLCanvasElement;
+  // Fit the canvas into the div
+  const rect = internalDiv.getBoundingClientRect();
+  const devicePixelRatio = window.devicePixelRatio || 1;
+
+  // The width/height is the number of physical pixels which will completely
+  // cover the div so that no pixels, fractional or full are left uncovered.
+  // Thus, it is the ceiling of the CSS size times the physical pixels.
+  // In theory, the physical pixels can be offset from CSS pixels, but in practice
+  // this hasn't been observed.
+  const width = Math.ceil(rect.width * devicePixelRatio);
+  const height = Math.ceil(rect.height * devicePixelRatio);
+  canvas.width = width;
+  canvas.height = height;
+  // Reset the size of the canvas to be the number of physical pixels,
+  // expressed as CSS pixels, with a tiny extra amount to prevent clipping
+  // to the next lower size in the physical display.
+  canvas.style.width = (width + EPSILON) / devicePixelRatio + 'px';
+  canvas.style.height = (height + EPSILON) / devicePixelRatio + 'px';
+
+  return canvas;
 }

package/src/RenderingEngine/helpers/index.ts

@@ -4,6 +4,7 @@ import getOrCreateCanvas from './getOrCreateCanvas';
 import setVolumesForViewports from './setVolumesForViewports';
 import addVolumesToViewports from './addVolumesToViewports';
 import volumeNewImageEventDispatcher from './volumeNewImageEventDispatcher';
+import addImageSlicesToViewports from './addImageSlicesToViewports';
 
 export {
   createVolumeActor,
@@ -11,5 +12,6 @@ export {
   getOrCreateCanvas,
   setVolumesForViewports,
   addVolumesToViewports,
+  addImageSlicesToViewports,
   volumeNewImageEventDispatcher,
 };