How to use drawing API

I’m attempting to use the drawing API (drawing | API | Cornerstone.js) to add bounding boxes, text boxes, etc… to an image stack.

Most API methods in this package expect an SVGDrawingHelper parameter. Where do I get this from? Are there examples for how this API is supposed to be used?


Hi @stemps, the annotation tools use this API…

I hope this helps.

Hi @jbocce, I’m still having trouble getting the drawing API to work. I seem to be having some wrong assumptions.

Here’s a minimal code project that tries to draw a rectangle over an image stack:
GitHub - stemps/cornerstonejs-playground at drawing-rectangles (see src/index.js).

The core of the code is:

      const renderingEngineId = 'myRenderingEngine';
      const renderingEngine = new RenderingEngine(renderingEngineId);

      const viewportId = 'MRT_STACK';
      const { ViewportType } = Enums;
      const viewportInput = {
        type: ViewportType.STACK,


      const viewport = renderingEngine.getViewport(viewportId);
      viewport.setStack(imageIds, 1);

      const drawingHelper = getSvgDrawingHelper(element);
          color: "red"

However, no rectangle is being drawn. Could you point me to where I’m using it wrong?

Hmmm… what you have is NOT typically how annotations and the drawing API are utilized. If you have a look at the link I sent previously you will see that there are various annotation (tools) which create and add annotation objects to the viewport elements via the annotationState
addAnnotation function. Each annotation tool has a renderAnnotation (where the svg is drawn) which in turn is triggered via a call to triggerAnnotationRender. I suppose if you add your own annotation tool (say for your own custom rectangle - as there is already a RectangleROITool) you will see your rectangle rendered when/after the viewport is rendered.

What you have MIGHT work if the drawing (drawing.drawRect) were to be scheduled to occur on the next annotation frame (i.e. window.requestAnimationFrame(()=> drawing.drawRect...) but not sure this will work and/or is recommended.

I hope this helps.

Hi @Spie, I didn’t manage to get RectangleROI to work for my purpose and eventually gave up and used a canvas overlay to draw rectangles and other annotations.

Maybe you have more luck, but if not, an additional canvas is a totally viable option.

Hello @stemps, Yes it’s taking a lot of time to figure out how to do it using RectangleROI. Could you please share how you did the canvas overlay? The above code doesn’t seem to work. Thanks

I was able to display rectangle overlay on default images on OHIF’s platform. I would like to do this overlay on a custom stack of images like you did @stemps
I am new to this, I have tried using your code, however, I can’t seem to get it working. Could you please help me figure it out?

Here are the steps that I am taking:

  1. I ran a server to host the PNG images (after resolving the CORS issue). I see the hosted localhost image on this live image website.
  2. I am using your code as is. I know that WebImageLoader is registered. However, the viewport is not getting the image data and I get “CornerstoneTools.stackPrefetch: No images in stack”, “Viewport is too small 0 0” errors.

@stemps @jbocce @mtesopt Can anyone suggest, what I could be doing wrong?

1 Like