Add setters (.font .fillStyle .strokeStyle) to maintain compatibility…

… with

the CanvasRenderingContext2D API.

src/canvascontext.ts

@@ -39,7 +39,7 @@ export class CanvasContext implements RenderContext {
 
   /**
    * This constructor is only called if Renderer.USE_CANVAS_PROXY is true.
-   * In most instances, we do not need to
+   * In most instances, we do not need to create a CanvasContext object.
    * See Renderer.bolsterCanvasContext().
    * @param context
    */
@@ -241,4 +241,25 @@ export class CanvasContext implements RenderContext {
     this.vexFlowCanvasContext.restore();
     return this;
   }
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set font(value: string) {
+    debugger;
+    console.log('CanvasContext .font! [' + value + ']');
+    this.vexFlowCanvasContext.font = value;
+  }
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set fillStyle(style: string) {
+    debugger;
+    console.log('CanvasContext .fillStyle! [' + style + ']');
+    this.vexFlowCanvasContext.fillStyle = style;
+  }
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set strokeStyle(style: string) {
+    debugger;
+    console.log('CanvasContext .strokeStyle! [' + style + ']');
+    this.vexFlowCanvasContext.strokeStyle = style;
+  }
 }

src/renderer.ts

@@ -71,6 +71,8 @@ export class Renderer {
 
     // Modify the CanvasRenderingContext2D to include the following methods, if they do not already exist.
     // setLineDash exists natively: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
+    // TODO: Is a Proxy object appropriate here?
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
     const methodNames = [
       'clear',
       'setFont',
@@ -90,9 +92,14 @@ export class Renderer {
 
     ctx.vexFlowCanvasContext = ctx;
 
+    // TODO: Do we get called with the same context over and over again?
+    // TODO: Keep references to the context to see if it's the same one.
+    // ANSWER: PROBABLY YES!!!
     methodNames.forEach((methodName) => {
-      // eslint-disable-next-line
-      ctx[methodName] = ctx[methodName] || (CanvasContext.prototype as any)[methodName];
+      if (!(methodName in ctx)) {
+        // eslint-disable-next-line
+        ctx[methodName] = (CanvasContext.prototype as any)[methodName];
+      }
     });
 
     return ctx;

src/svgcontext.ts

@@ -709,4 +709,22 @@ export class SVGContext implements RenderContext {
     }
     return this;
   }
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set font(value: string) {
+    console.log('SVG Context .font! [' + value + ']');
+    this.setRawFont(value);
+  }
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set fillStyle(style: string) {
+    console.log('SVG Context .fillStyle! [' + style + ']');
+    this.setFillStyle(style);
+  }
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set strokeStyle(style: string) {
+    console.log('SVG Context .strokeStyle! [' + style + ']');
+    this.setStrokeStyle(style);
+  }
 }

src/types/common.d.ts

@@ -82,10 +82,17 @@ export interface RenderContext {
   closeGroup(): void;
   add(child: any): void;
 
-  /**
-   * canvas returns TextMetrics and SVG returns SVGRect.
-   */
+  /** canvas returns TextMetrics and SVG returns SVGRect. */
   measureText(text: string): { width: number; height?: number };
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set font(value: string);
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set fillStyle(style: string);
+
+  /** Maintain compatibility with the CanvasRenderingContext2D API. */
+  set strokeStyle(style: string);
 }
 
 export interface TieNotes {

tests/annotation_tests.js

@@ -61,8 +61,10 @@ const AnnotationTests = (function () {
     simple: function (options, contextBuilder) {
       var ctx = contextBuilder(options.elementId, 500, 240);
       ctx.scale(1.5, 1.5);
-      ctx.fillStyle = '#221';
-      ctx.strokeStyle = '#221';
+      // ctx.fillStyle = '#221';
+      // ctx.strokeStyle = '#221';
+      ctx.fillStyle = '#F21';
+      ctx.strokeStyle = '#F21';
       ctx.font = ' 10pt Arial';
       var stave = new VF.TabStave(10, 10, 450).addTabGlyph().setContext(ctx).draw();