diff --git a/__tests__/src/components/OpenSeadragonViewer.test.js b/__tests__/src/components/OpenSeadragonViewer.test.js
index 1c8f04186bca94a14d323b82a9424b16904d4a04..10cf73d77c992edeb93709c70e285436e88188fc 100644
--- a/__tests__/src/components/OpenSeadragonViewer.test.js
+++ b/__tests__/src/components/OpenSeadragonViewer.test.js
@@ -412,7 +412,8 @@ describe('OpenSeadragonViewer', () => {
       };
       wrapper.instance().viewer = {
         viewport: {
-          getZoom: () => (0.0005),
+          getMaxZoom: () => (1),
+          getZoom: () => (0.05),
         },
       };
 
@@ -424,7 +425,7 @@ describe('OpenSeadragonViewer', () => {
       wrapper.instance().annotationsToContext(annotations);
       const context = wrapper.instance().osdCanvasOverlay.context2d;
       expect(context.strokeStyle).toEqual('yellow');
-      expect(context.lineWidth).toEqual(4);
+      expect(context.lineWidth).toEqual(20);
       expect(strokeRect).toHaveBeenCalledWith(10, 10, 100, 200);
     });
   });
diff --git a/__tests__/src/lib/CanvasAnnotationDisplay.test.js b/__tests__/src/lib/CanvasAnnotationDisplay.test.js
index f96c6d09f210e8cec12c9b27af567f106aa80366..1e8904d47ba8a855838930b1e012d4cad4822b20 100644
--- a/__tests__/src/lib/CanvasAnnotationDisplay.test.js
+++ b/__tests__/src/lib/CanvasAnnotationDisplay.test.js
@@ -10,7 +10,7 @@ function createSubject(args) {
       x: -100,
       y: 0,
     },
-    zoom: 0.0005,
+    zoomRatio: 0.5,
     ...args,
   });
 }
@@ -72,7 +72,7 @@ describe('CanvasAnnotationDisplay', () => {
       expect(context.restore).toHaveBeenCalledWith();
       expect(context.translate).toHaveBeenCalledWith(-100, 0);
       expect(context.strokeStyle).toEqual('#00bfff');
-      expect(context.lineWidth).toEqual(617.4334);
+      expect(context.lineWidth).toEqual(61.74334);
       expect(context.fill).toHaveBeenCalled();
     });
   });
@@ -88,7 +88,7 @@ describe('CanvasAnnotationDisplay', () => {
       subject.fragmentContext();
       expect(context.strokeRect).toHaveBeenCalledWith(-90, 10, 100, 200);
       expect(context.strokeStyle).toEqual('blue');
-      expect(context.lineWidth).toEqual(20);
+      expect(context.lineWidth).toEqual(2);
     });
   });
 });
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
index 0d7037322ed6d340963422765fd623c4a2a28d0c..0c615161c3364dcfb2393aa66a7af492a9a0ad88 100644
--- a/src/components/OpenSeadragonViewer.js
+++ b/src/components/OpenSeadragonViewer.js
@@ -189,14 +189,13 @@ export class OpenSeadragonViewer extends Component {
   annotationsToContext(annotations, color = 'yellow') {
     const { canvasWorld } = this.props;
     const context = this.osdCanvasOverlay.context2d;
-    const zoom = this.viewer.viewport.getZoom(true);
-    const width = canvasWorld.worldBounds()[2];
+    const zoomRatio = this.viewer.viewport.getZoom(true) / this.viewer.viewport.getMaxZoom();
     annotations.forEach((annotation) => {
       annotation.resources.forEach((resource) => {
         if (!canvasWorld.canvasIds.includes(resource.targetId)) return;
         const offset = canvasWorld.offsetByCanvas(resource.targetId);
         const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
-          color, offset, resource, width, zoom,
+          color, offset, resource, zoomRatio,
         });
         canvasAnnotationDisplay.toContext(context);
       });
diff --git a/src/lib/CanvasAnnotationDisplay.js b/src/lib/CanvasAnnotationDisplay.js
index 6520703a495c2391afd454c6806e583860b1a3c6..80638297ab3478c4ccf6a49beed5c5f2902947dc 100644
--- a/src/lib/CanvasAnnotationDisplay.js
+++ b/src/lib/CanvasAnnotationDisplay.js
@@ -5,13 +5,12 @@
 export default class CanvasAnnotationDisplay {
   /** */
   constructor({
-    resource, color, zoom, offset, width,
+    resource, color, zoomRatio, offset,
   }) {
     this.resource = resource;
     this.color = color;
-    this.zoom = zoom;
+    this.zoomRatio = zoomRatio;
     this.offset = offset;
-    this.width = width || 1000;
   }
 
   /** */
@@ -53,6 +52,7 @@ export default class CanvasAnnotationDisplay {
         'stroke-linecap': 'lineCap',
         'stroke-linejoin': 'lineJoin',
         'stroke-miterlimit': 'miterlimit',
+        'stroke-width': 'lineWidth',
       };
       Object.keys(svgToCanvasMap).forEach((key) => {
         if (element.attributes[key]) {
@@ -60,9 +60,8 @@ export default class CanvasAnnotationDisplay {
         }
       });
 
-      this.context.lineWidth = this.lineWidth( // eslint-disable-line no-param-reassign
-        element.attributes,
-      );
+      // Resize the stroke based off of the zoomRatio (currentZoom / maxZoom)
+      this.context.lineWidth /= this.zoomRatio;
       this.context.stroke(p);
 
       // Wait to set the fill, so we can adjust the globalAlpha value if we need to
@@ -81,21 +80,11 @@ export default class CanvasAnnotationDisplay {
     const fragment = this.resource.fragmentSelector;
     fragment[0] += this.offset.x;
     fragment[1] += this.offset.y;
-    this.context.strokeStyle = this.color; // eslint-disable-line no-param-reassign
-    this.context.lineWidth = this.lineWidth(); // eslint-disable-line no-param-reassign
+    this.context.strokeStyle = this.color;
+    this.context.lineWidth = 1 / this.zoomRatio;
     this.context.strokeRect(...fragment);
   }
 
-  /** */
-  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;
-    }
-    return calculatedWidth;
-  }
-
   /** */
   get svgPaths() {
     const parser = new DOMParser();