DrawingGeometry

This documentation is for a much older version of cornerstone-tools. While it may still loosely apply, more recent information can be found at https://tools.cornerstonejs.org

Tools often need to draw geometry on the image (e.g. a line indicating the length of a measurement, a rectangle for a ROI, etc). A tool that needs to draw geometry must first listen for the CornerstoneImageRendered-Event on the enabled-element the tool has been enabled, activated or deactivated for. When the tool's handler is called to handle the event, the canvas context used by cornerstone to render this image is passed as event data. The tool handler therefore renders geometry using HTML5 canvas context functions. Tool drawing is generally done in the Pixel Coordinate System. Cornerstone provides the function setToPixelCoordinateSystem to set the canvas context transformation matrix to the Pixel Coordinate System. This means a tool developer can simply make calls to canvas context using Pixel Coordinates and everything will be drawn in the correct place.

One thing to keep in mind is the on screen line width is based on the scale of the canvas context. A line width of 1 will result in a line that is one pixel wide in the Pixel Coordinate System when the scale is 1.0. If you increase the zoom, the on screen line width will increase and decreasing the zoom will make the line thinner or disappear entirely. In some cases this is desirable, but in other cases, a tool would prefer to draw a line a single screen pixel wide regardless of the image viewport zoom.

To draw lines with a consistent on screen line width, you must take into account the image viewport zoom:

function onImageRendered(e) {
   cornerstoneCore.setToPixelCoordinateSystem(e.detail.enabledElement, e.detail.canvasContext);  
   var context = e.detail.canvasContext;
   context.beginPath(); 
   context.lineWidth = 1 / e.detail.viewport.scale;
   context.rect(10,10,10,10);
   context.stroke();
 }