Merge pull request #123 from JakeSidSmith/clear-canvas-density-fixes-rc2

Fix: Clearing canvas density resets rc2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasimo",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "An HTML5 canvas drawing library, with 150+ useful methods, jQuery-like fluent interface, and cross-browser compatibility enhancements.",
   "main": "dist/index.js",
   "types": "build/index.d.ts",

src/index.ts

@@ -87,38 +87,7 @@ export class Canvasimo {
   public setDensity = (density: number): Canvasimo => {
     const prevDensity = this.density;
 
-    const {
-      width: prevWidth,
-      height: prevHeight,
-    } = this.getSize();
-    const prevFontSize = this.getFontSize();
-    const prevLineDash = this.getLineDash();
-    const prevLineDashOffset = this.getLineDashOffset();
-    const prevLineWidth = this.getLineWidth();
-    const prevMiterLimit = this.getMiterLimit();
-    const prevShadowBlur = this.getShadowBlur();
-    const prevShadowOffsetX = this.getShadowOffsetX();
-    const prevShadowOffsetY = this.getShadowOffsetY();
-
-    this.density = density;
-
-    if (prevDensity !== density) {
-      this.setSize(prevWidth, prevHeight);
-
-      if (typeof prevFontSize === 'number') {
-        this.setFontSize(prevFontSize);
-      }
-
-      this.setLineDash(prevLineDash);
-      this.setLineDashOffset(prevLineDashOffset);
-      this.setLineWidth(prevLineWidth);
-      this.setMiterLimit(prevMiterLimit);
-      this.setShadowBlur(prevShadowBlur);
-      this.setShadowOffsetX(prevShadowOffsetX);
-      this.setShadowOffsetY(prevShadowOffsetY);
-    }
-
-    return this;
+    return this.resetDensityRelatedValues(prevDensity, density, true);
   }
   /**
    * Get the canvas pixel density.
@@ -1247,10 +1216,9 @@ export class Canvasimo {
    * Clear the entire canvas area
    */
   public clearCanvas = (): Canvasimo => {
+    this.setWidth(this.getWidth());
     // Ensure densities are retained
-    const currentDensity = this.density;
-    this.density = DEFAULT_DENSITY;
-    return this.setWidth(this.getWidth()).setDensity(currentDensity);
+    return this.resetDensityRelatedValues(DEFAULT_DENSITY, this.density, false);
   }
   /**
    * Clear a rectangular area of the canvas.
@@ -2073,6 +2041,45 @@ export class Canvasimo {
       return this.drawTextWithLineBreaks(method, lines.join('\n'), x, y, lineHeight, color);
     }
   }
+  private resetDensityRelatedValues = (prevDensity: number, density: number, setSize: boolean): Canvasimo => {
+    this.density = prevDensity;
+
+    const {
+      width: prevWidth,
+      height: prevHeight,
+    } = this.getSize();
+
+    const prevFontSize = this.getFontSize();
+    const prevLineDash = this.getLineDash();
+    const prevLineDashOffset = this.getLineDashOffset();
+    const prevLineWidth = this.getLineWidth();
+    const prevMiterLimit = this.getMiterLimit();
+    const prevShadowBlur = this.getShadowBlur();
+    const prevShadowOffsetX = this.getShadowOffsetX();
+    const prevShadowOffsetY = this.getShadowOffsetY();
+
+    this.density = density;
+
+    if (prevDensity !== density) {
+      if (setSize) {
+        this.setSize(prevWidth, prevHeight);
+      }
+
+      if (typeof prevFontSize === 'number') {
+        this.setFontSize(prevFontSize);
+      }
+
+      this.setLineDash(prevLineDash);
+      this.setLineDashOffset(prevLineDashOffset);
+      this.setLineWidth(prevLineWidth);
+      this.setMiterLimit(prevMiterLimit);
+      this.setShadowBlur(prevShadowBlur);
+      this.setShadowOffsetX(prevShadowOffsetX);
+      this.setShadowOffsetY(prevShadowOffsetY);
+    }
+
+    return this;
+  }
 }
 
 export default Canvasimo;

tests/density.ts

@@ -5,27 +5,33 @@ describe('density', () => {
 
   const element = document.createElement('canvas');
   jest.spyOn(element, 'getContext').mockImplementation(getContextStub);
-  const instance = new Canvasimo(element);
+  const instance = new Canvasimo(element).setWidth(100);
   const ctx = instance.getCurrentContext();
 
   it('should explicitly set the font size upon creation', () => {
     expect(ctx.font).toBe('normal normal normal 10px sans-serif');
     expect(instance.getFontSize()).toBe(10);
+    expect(element.width).toBe(100);
+    expect(instance.getWidth()).toBe(100);
   });
 
   it('updates font size when changing the density', () => {
     instance.setDensity(2);
 
     expect(ctx.font).toBe('normal normal normal 20px sans-serif');
     expect(instance.getFontSize()).toBe(10);
+    expect(element.width).toBe(200);
+    expect(instance.getWidth()).toBe(100);
   });
 
-  it('retains density when the canvas is cleared', () => {
+  it('retains density when the canvas is cleared (without changing the canvas size)', () => {
     // Fake browser font reset
     ctx.font = '10px sans-serif';
     instance.clearCanvas();
 
     expect(ctx.font).toBe('normal normal normal 20px sans-serif');
     expect(instance.getFontSize()).toBe(10);
+    expect(element.width).toBe(200);
+    expect(instance.getWidth()).toBe(100);
   });
 });

tests/docs.ts

@@ -16,6 +16,7 @@ const PRIVATE_PROPERTIES = [
   'wrapBreakWord',
   'wrapNormal',
   'textMultiline',
+  'resetDensityRelatedValues',
 ];
 
 describe('getDocJson', () => {

tests/helpers/constants.ts

@@ -1,3 +1,3 @@
-export const NUMBER_OF_PROPERTIES = 193;
+export const NUMBER_OF_PROPERTIES = 194;
 export const NUMBER_OF_DOC_GROUPS = 16;
 export const CLASS_NAME = 'Canvasimo';