Display DICOM Annotations

The HTML canvas of markups always overlaps the HTML canvas of images by assigning different CSS z-index values to represent o the position in layers. HTML canvas functions, such as full text, stroke, ellipse, and arc, draw GSPS marks, such as text, polyline, ellipse, and circle, respectively. BlueLight can create and display various DICOM-compliant image markups and annotations, such as GSPS, overlay, RTSTRUCT, and SEG, LabelImg and AIM. The overlay and SEG are drawn by the drawImage function, and RTSTRUCT is drawn by the stroke function. If the DICOM image plane module is defined, the setTransform function of the HTML canvas is used to display the annotation 2D image and annotation plane correctly. Creating the correspond transformation matrix requires the following DICOM attributes: ImageOrientation (0020,0037), ImagePosition (0020,0032), and PixelSpacing (0028,0031). In 3D display mode, the markup will be drawn to each 2D canvas; after arranging, the 2D markup in the vision will be converted to a 3D markup. The transformation method of setTransform is shown in Fig. ​Fig.44.

The transformation using setTransform to draw markups and annotations. The left array of X₀, Y₀, and Z₀ are the new points after drawing. New points when drawing as follows: new point.x = (point—imagePosition[0]) * PixelSpacing new point.y= (point - imagePosition[1]) * PixelSpacing