example/index.html

<html>
  <head>
    <title>Quick Test Page</title>

    <style>
      html,
      body {
        background: dodgerblue;
      }
      #cornerstone-element {
        width: 512px;
        height: 512px;
        margin: 0 auto;
        background: #ccc;
      }
    </style>

    <!-- peerDependencies -->
    
    <!-- Our Plugin -->
  </head>
  <body>
    <section>
      <div
        id="cornerstone-element"
        data-index="0"
        oncontextmenu="return false"
      ></div>
    </section>
  </body>
  <script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
  <script src="https://unpkg.com/cornerstone-math@0.1.7/dist/cornerstoneMath.min.js"></script>
  <script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
  <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
  <script src="https://unpkg.com/cornerstone-tools@4.0.7/dist/cornerstoneTools.js"></script>
  <script src="../dist/rotated-elliptical-roi-tool.umd.js"></script>
  <script>
    /***
     * Setup
     */
    cornerstoneWebImageLoader.external.cornerstone = cornerstone;
    cornerstone.registerImageLoader(
      "http",
      cornerstoneWebImageLoader.loadImage
    );
    cornerstone.registerImageLoader(
      "https",
      cornerstoneWebImageLoader.loadImage
    );
    /***
     * Boilerplate
     */
    cornerstoneTools.init({
      showSVGCursors: true,
    });
    cornerstoneTools.toolColors.setToolColor("orange");
    // Enable Element
    const element = document.querySelector("#cornerstone-element");
    cornerstone.enable(element);
    // Load and Display Image
    const exampleImageId =
      "https://rawgit.com/dannyrb/cornerstone-vuejs-poc/master/static/simple-study/1.2.276.0.74.3.1167540280.200511.112514.1.1.10.jpg";
    cornerstone.loadImage(exampleImageId).then(function(image) {
      cornerstone.displayImage(element, image);

      const WwwcTool = cornerstoneTools.WwwcTool;
      const PanTool = cornerstoneTools.PanTool;
      const EraserTool = cornerstoneTools.EraserTool;
      cornerstoneTools.addTool(WwwcTool);
      cornerstoneTools.addTool(PanTool);
      cornerstoneTools.addTool(EraserTool);
      cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 4 });
      cornerstoneTools.setToolActive("Eraser", { mouseButtonMask: 2 });

      cornerstoneTools.addTool(RotatedEllipticalRoiTool);
      cornerstoneTools.setToolActive("RotatedEllipticalRoi", { mouseButtonMask: 1 });
    });
  </script>
</html>