DevBrainiac Web Image
Articles
Blogs
MCQ
SQL
Q&A
Tools
Tags
Jobs
Community
LogIn
I don't have account.

How to get correct image coordinates from mouse click in Cornerstone.js?

I’m developing an Angular-based DICOM viewer using Cornerstone.js and I need to map mouse click positions to image-space coordinates i.e., the true pixel coordinates within the original DICOM image.

Currently, the coordinates I get change when zooming or panning, which means I’m likely mixing up screen/client coordinates with Cornerstone’s internal viewport transforms.

What i want to achieve :

When a user clicks on the image (even after zooming or panning), the resulting (x, y) coordinates should:

  • Always represent the same pixel in the image.
  • Remain consistent and stable regardless of zoom or pan.
  • Match Cornerstone’s internal pixel coordinate system.

The final coordinates will be sent to a backend (FastAPI) for region-based image analysis so they must stay anchored to the image pixels, not the viewport.

Current Implementation

private setupMouseClickHandler(element: HTMLElement): void {
  element.addEventListener('click', (event: MouseEvent) => {
    try {
      const enabledElement = cornerstone.getEnabledElement(element);
      if (enabledElement && enabledElement.image) {
        const imagePoint = cornerstone.pageToPixel(
          element,
          event.screenX,
          event.screenY
        );
        this.selectedX = Math.ceil(imagePoint.x);
        this.selectedY = Math.ceil(imagePoint.y);
        this.drawMarker(element, imagePoint.x, imagePoint.y);
        this.snackBar.open(
          `Selected coordinates: (${this.selectedX}, ${this.selectedY})`,
          'Close',
          { duration: 2000 }
        );
      }
    } catch (error) {
      console.error('Error getting pixel coordinates:', error);
    }
  });
}

 

 What I have Tried

I tested the following coordinate mappings, but none produce consistent results when zooming or panning:

pageToPixel(element, event.pageX, event.pageY)
pageToPixel(element, event.clientX, event.clientY)
pageToPixel(element, event.offsetX, event.offsetY)
pageToPixel(element, event.screenX, event.screenY)

All these values drift depending on the current zoom and pan level.

My Question

What is the correct way to convert a mouse click position on a Cornerstone-enabled element into image-space pixel coordinates that remain stable regardless of zoom/pan?

Specifically:

  • Should I use a different Cornerstone API (like cornerstone.pixelToCanvas)?
  • Should I use Cornerstone’s tool event system instead of raw mouse listeners?
  • Do I need to apply transformations using getViewport() (e.g., scale and translation) manually?

Environment

  • Framework: Angular 17
  • Cornerstone Packages:
    • cornerstone-core
    • cornerstone-tools
    • cornerstone-wado-image-loader
  • Backend: FastAPI (for ROI-based processing)

I’m looking for a recommended Cornerstone method or example to obtain stable, image-space coordinates from a mouse click independent of zoom and pan.

If anyone can share an example, official reference or best practice, it would be greatly appreciated!

JavaScriptSoftwareWeb Development

Please pay attention to update your answer.

Update Your Answer care fully. After saving you can not recover your old answer

Carefully Update Your Answer!!

Use Cornerstone’s internal event system instead of raw DOM events — it automatically gives you image-space coordinates.

cornerstoneTools.addTool(cornerstoneTools.StackScrollMouseWheelTool);
cornerstoneTools.setToolActive('StackScrollMouseWheel', { mouseButtonMask: 1 });

element.addEventListener('cornerstonetoolsmouseclick', (evt: any) => {
  const eventData = evt.detail;
  const { x, y } = eventData.currentPoints.image; //  Image-space coordinates
  console.log(`Clicked image pixel: (${x.toFixed(2)}, ${y.toFixed(2)})`);
});

 

 Why it works

  • cornerstonetoolsmouseclick gives eventData.currentPoints.image,
    which is already transformed into image pixel coordinates.
  • It stays stable across zoom and pan.
  • You don’t need to call pageToPixel manually.

Alternative (without cornerstone-tools)

If you’re using only cornerstone-core:

const rect = element.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

const imagePoint = cornerstone.canvasToPixel(element, { x, y });
console.log(imagePoint.x, imagePoint.y);

 Use cornerstone.canvasToPixel() (not pageToPixel)
This correctly converts from canvas (screen) to image coordinates.

Similar Questions
Popular Tags
Popular Questions
Newly Asked Questions