Merge pull request #122 from JakeSidSmith/font-size-density

Fix: Clearing the canvas does not reset density related values

package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasimo",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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/constants.ts

@@ -32,6 +32,7 @@ export const INCORRECT_GET_ANGLE_ARGUMENTS = 'Incorrect number of arguments supp
  'Arguments must be [x1, y1, x2, y2] or [x1, y1, x2, y2, x3, y3].';
 
 export const DEFAULT_FONT = ['normal', 'normal', 'normal', '10px', 'sans-serif'];
+export const DEFAULT_DENSITY = 1;
 
 export const MATCHES_SPECIAL_FILL = /^(nonzero|evenodd)$/i;
 export const MATCHES_NORMAL = /^(normal)$/i;

src/index.ts

@@ -2,6 +2,7 @@
 const { version: VERSION } = require('../package.json');
 import {
   CONTEXT_TYPE,
+  DEFAULT_DENSITY,
   DEFAULT_FONT,
   IMAGE_SMOOTHING_KEYS,
   INCORRECT_GET_ANGLE_ARGUMENTS,
@@ -55,7 +56,7 @@ export class Canvasimo {
   private element: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D;
   private ctxType: typeof CONTEXT_TYPE = CONTEXT_TYPE;
-  private density: number = 1;
+  private density: number = DEFAULT_DENSITY;
 
   public constructor (element: HTMLCanvasElement) {
     this.element = element;
@@ -66,7 +67,7 @@ export class Canvasimo {
     }
 
     this.ctx = ctx;
-    this.ctx.font = formatFont(ctx.font, this.density, true);
+    this.ctx.font = formatFont(this.ctx.font, this.density, true);
   }
 
   /**
@@ -1246,8 +1247,10 @@ export class Canvasimo {
    * Clear the entire canvas area
    */
   public clearCanvas = (): Canvasimo => {
-    return this
-      .setWidth(this.getWidth());
+    // Ensure densities are retained
+    const currentDensity = this.density;
+    this.density = DEFAULT_DENSITY;
+    return this.setWidth(this.getWidth()).setDensity(currentDensity);
   }
   /**
    * Clear a rectangular area of the canvas.

tests/density.ts

@@ -0,0 +1,31 @@
+import Canvasimo from '../src';
+import getContextStub from './helpers/get-context-stub';
+
+describe('density', () => {
+
+  const element = document.createElement('canvas');
+  jest.spyOn(element, 'getContext').mockImplementation(getContextStub);
+  const instance = new Canvasimo(element);
+  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);
+  });
+
+  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);
+  });
+
+  it('retains density when the canvas is cleared', () => {
+    // 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);
+  });
+});

tests/index.ts

@@ -545,7 +545,7 @@ describe('canvasimo', () => {
   describe('plot path', () => {
 
     it('should accept and plot valid point arrays', () => {
-      const context = canvas.getCurrentContext() as CanvasRenderingContext2D;
+      const context = canvas.getCurrentContext();
       const moveToSpy = jest.spyOn(context, 'moveTo');
       const lineToSpy = jest.spyOn(context, 'lineTo');
 

tests/inspect.ts

@@ -55,12 +55,8 @@ describe('inspect', () => {
           if (property.initializer.kind === ts.SyntaxKind.Identifier) {
             if (name === 'ctxType') {
               expect((property.initializer as any).text).toBe('CONTEXT_TYPE');
-            } else {
-              throw new Error(`Un-tested property ${name} at index ${index}`);
-            }
-          } else if (property.initializer.kind === ts.SyntaxKind.NumericLiteral) {
-            if (name === 'density') {
-              expect((property.initializer as any).text).toBe('1');
+            } else if (name === 'density') {
+              expect((property.initializer as any).text).toBe('DEFAULT_DENSITY');
             } else {
               throw new Error(`Un-tested property ${name} at index ${index}`);
             }