Do not use the SVG color for the stroke if it is selected fixes #2989

__tests__/src/lib/CanvasAnnotationDisplay.test.js

@@ -75,6 +75,23 @@ describe('CanvasAnnotationDisplay', () => {
       expect(context.lineWidth).toEqual(61.74334);
       expect(context.fill).toHaveBeenCalled();
     });
+    it('resets the color if selected rather than using the SVG color', () => {
+      const context = {
+        fill: jest.fn(),
+        restore: jest.fn(),
+        save: jest.fn(),
+        setLineDash: jest.fn(),
+        stroke: jest.fn(),
+        translate: jest.fn(),
+      };
+      const subject = createSubject({
+        resource: new AnnotationResource(dualStrategyAnno),
+        selected: true,
+      });
+      subject.context = context;
+      subject.svgContext();
+      expect(subject.context.strokeStyle).toBe('blue');
+    });
   });
   describe('fragmentContext', () => {
     it('draws the fragment with selected arguments', () => {

src/components/OpenSeadragonViewer.js

@@ -186,7 +186,7 @@ export class OpenSeadragonViewer extends Component {
   /**
    * annotationsToContext - converts anontations to a canvas context
    */
-  annotationsToContext(annotations, color = 'yellow') {
+  annotationsToContext(annotations, color = 'yellow', selected = false) {
     const { canvasWorld } = this.props;
     const context = this.osdCanvasOverlay.context2d;
     const zoomRatio = this.viewer.viewport.getZoom(true) / this.viewer.viewport.getMaxZoom();
@@ -195,7 +195,7 @@ export class OpenSeadragonViewer extends Component {
         if (!canvasWorld.canvasIds.includes(resource.targetId)) return;
         const offset = canvasWorld.offsetByCanvas(resource.targetId);
         const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
-          color, offset, resource, zoomRatio,
+          color, offset, resource, selected, zoomRatio,
         });
         canvasAnnotationDisplay.toContext(context);
       });
@@ -359,10 +359,11 @@ export class OpenSeadragonViewer extends Component {
     this.annotationsToContext(
       selectedContentSearchAnnotations,
       palette.highlights.primary,
+      true,
     );
 
     this.annotationsToContext(highlightedAnnotations, palette.highlights.secondary);
-    this.annotationsToContext(selectedAnnotations, palette.highlights.primary);
+    this.annotationsToContext(selectedAnnotations, palette.highlights.primary, true);
   }
 
   /**

src/lib/CanvasAnnotationDisplay.js

@@ -5,12 +5,13 @@
 export default class CanvasAnnotationDisplay {
   /** */
   constructor({
-    resource, color, zoomRatio, offset,
+    resource, color, zoomRatio, offset, selected,
   }) {
     this.resource = resource;
     this.color = color;
     this.zoomRatio = zoomRatio;
     this.offset = offset;
+    this.selected = selected;
   }
 
   /** */
@@ -62,6 +63,10 @@ export default class CanvasAnnotationDisplay {
 
       // Resize the stroke based off of the zoomRatio (currentZoom / maxZoom)
       this.context.lineWidth /= this.zoomRatio;
+      // Reset the color if it is selected
+      if (this.selected) {
+        this.context.strokeStyle = this.color;
+      }
       this.context.stroke(p);
 
       // Wait to set the fill, so we can adjust the globalAlpha value if we need to