svg-draw-component

The svg-draw-component allows a user to draw SVG shapes on a HTML5 canvas using Paper.js, a canvas-wrapping library. Users have the option to overlay the canvas on images, an OpenSeadragon instance, or a plain canvas (default). To try out the component on your own, there are three basic steps:

  1. Include the bundled svg-draw-component and base-component files (along with OpenSeadragon distribution files if using it)
  2. Add a <div id="svgdraw"> element in the body
  3. Optionally add a hidden image element in the body (outside of the svgdraw element) and give it an id.
  4. Add the following below your svgdraw div 
                <script type="text/javascript">
                var svgdraw;

                $(function() {

                  svgdraw = new IIIFComponents.SvgDrawComponent({
                      element: "#svgdraw",
                      subjectType: "" // other options are "image" or "openseadragon"
                      subject: "" // other options your imageID or osd config object
                  });

                });
            </script>

Demos