Setup additional stroke and fill styling for SVG -> Canvas

__tests__/src/lib/CanvasAnnotationDisplay.test.js

@@ -55,6 +55,7 @@ describe('CanvasAnnotationDisplay', () => {
   describe('svgContext', () => {
     it('draws the paths with selected arguments', () => {
       const context = {
+        fill: jest.fn(),
         restore: jest.fn(),
         save: jest.fn(),
         setLineDash: jest.fn(),
@@ -72,6 +73,7 @@ describe('CanvasAnnotationDisplay', () => {
       expect(context.translate).toHaveBeenCalledWith(-100, 0);
       expect(context.strokeStyle).toEqual('#00bfff');
       expect(context.lineWidth).toEqual(617.4334);
+      expect(context.fill).toHaveBeenCalled();
     });
   });
   describe('fragmentContext', () => {

src/lib/CanvasAnnotationDisplay.js

@@ -40,31 +40,40 @@ export default class CanvasAnnotationDisplay {
       this.context.save();
       this.context.translate(this.offset.x, this.offset.y);
       const p = new Path2D(element.attributes.d.nodeValue);
-      /**
-       * Note: we could do something to return the svg styling attributes as
-       * some have encoded information in these values. However, how should we
-       * handle highlighting and other complications?
-       *  context.strokeStyle = element.attributes.stroke.nodeValue;
-       *  context.lineWidth = element.attributes['stroke-width'].nodeValue;
-       */
-      this.setupLineDash(element.attributes);
-      this.context.strokeStyle = this.strokeColor( // eslint-disable-line no-param-reassign
-        element.attributes,
-      );
+
+      // Setup styling from SVG -> Canvas
+      this.context.strokeStyle = this.color;
+      if (element.attributes['stroke-dasharray']) {
+        this.context.setLineDash(element.attributes['stroke-dasharray'].nodeValue.split(','));
+      }
+      const svgToCanvasMap = {
+        fill: 'fillStyle',
+        stroke: 'strokeStyle',
+        'stroke-dashoffset': 'lineDashOffset',
+        'stroke-linecap': 'lineCap',
+        'stroke-linejoin': 'lineJoin',
+        'stroke-miterlimit': 'miterlimit',
+      };
+      Object.keys(svgToCanvasMap).forEach((key) => {
+        if (element.attributes[key]) {
+          this.context[svgToCanvasMap[key]] = element.attributes[key].nodeValue;
+        }
+      });
+
       this.context.lineWidth = this.lineWidth( // eslint-disable-line no-param-reassign
         element.attributes,
       );
       this.context.stroke(p);
-      this.context.restore();
-    });
-  }
 
-  /** */
-  setupLineDash(elementAttributes) {
-    // stroke-dasharray
-    if (elementAttributes['stroke-dasharray']) {
-      this.context.setLineDash(elementAttributes['stroke-dasharray'].nodeValue.split(','));
+      // Wait to set the fill, so we can adjust the globalAlpha value if we need to
+      if (element.attributes.fill && element.attributes.fill.nodeValue !== 'none') {
+        if (element.attributes['fill-opacity']) {
+          this.context.globalAlpha = element.attributes['fill-opacity'].nodeValue;
         }
+        this.context.fill(p);
+      }
+      this.context.restore();
+    });
   }
 
   /** */
@@ -77,16 +86,9 @@ export default class CanvasAnnotationDisplay {
     this.context.strokeRect(...fragment);
   }
 
-  /** */
-  strokeColor(elementAttributes) {
-    if (elementAttributes && elementAttributes.stroke) {
-      return elementAttributes.stroke.nodeValue;
-    }
-    return this.color;
-  }
-
   /** */
   lineWidth(elementAttributes) {
+    console.log(this.zoom, this.width);
     let calculatedWidth = Math.ceil(10 / (this.zoom * this.width));
     if (elementAttributes && elementAttributes['stroke-width']) {
       calculatedWidth *= elementAttributes['stroke-width'].nodeValue;