fix(Zoom): Fix pageBackgroundColor not filling entire page for zoom < 1 (#904)

fix #904 (hopefully)

somehow i could only see the smaller rectangle in debug mode, and only for SVG.

src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts

@@ -11,6 +11,8 @@ import {EngravingRules} from "../EngravingRules";
 import {GraphicalMusicPage} from "../GraphicalMusicPage";
 
 export class CanvasVexFlowBackend extends VexFlowBackend {
+    private zoom: number;
+
     constructor(rules: EngravingRules) {
         super();
         this.rules = rules;
@@ -31,7 +33,8 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
         //     document.getElementById("osmdCanvasVexFlowBackendCanvas" + this.graphicalMusicPage.PageNumber)?.style.height, 10);
     }
 
-    public initialize(container: HTMLElement): void {
+    public initialize(container: HTMLElement, zoom: number): void {
+        this.zoom = zoom;
         this.canvas = document.createElement("canvas");
         if (!this.graphicalMusicPage) {
             this.graphicalMusicPage = new GraphicalMusicPage(undefined);
@@ -78,7 +81,8 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
             this.ctx.save();
             // note that this will hide the cursor
             this.ctx.setFillStyle(this.rules.PageBackgroundColor);
-            this.ctx.fillRect(0, 0, (this.canvas as any).width, (this.canvas as any).height);
+            this.zoom = 1; // remove
+            this.ctx.fillRect(0, 0, (this.canvas as any).width / this.zoom, (this.canvas as any).height / this.zoom);
             this.ctx.restore();
         }
     }

src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts

@@ -12,6 +12,7 @@ import {EngravingRules} from "../EngravingRules";
 export class SvgVexFlowBackend extends VexFlowBackend {
 
     private ctx: Vex.Flow.SVGContext;
+    private zoom: number;
 
     constructor(rules: EngravingRules) {
         super();
@@ -30,7 +31,8 @@ export class SvgVexFlowBackend extends VexFlowBackend {
         return document.getElementById("osmdCanvasPage" + this.graphicalMusicPage.PageNumber)?.offsetHeight;
     }
 
-    public initialize(container: HTMLElement): void {
+    public initialize(container: HTMLElement, zoom: number): void {
+        this.zoom = zoom;
         this.canvas = document.createElement("div");
         this.canvas.id = "osmdCanvasPage" + this.graphicalMusicPage.PageNumber;
         // this.canvas.id = uniqueID // TODO create unique tagName like with cursor now?
@@ -68,8 +70,9 @@ export class SvgVexFlowBackend extends VexFlowBackend {
             this.ctx.save();
             // note that this will hide the cursor
             this.ctx.setFillStyle(this.rules.PageBackgroundColor);
+            this.ctx.setStrokeStyle("#12345600"); // transparent
 
-            this.ctx.fillRect(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
+            this.ctx.fillRect(0, 0, this.canvas.offsetWidth / this.zoom, this.canvas.offsetHeight / this.zoom);
             this.ctx.restore();
         }
     }

src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts

@@ -24,7 +24,7 @@ export abstract class VexFlowBackend {
   public width: number; // read-only
   public height: number; // read-only
 
-  public abstract initialize(container: HTMLElement): void;
+  public abstract initialize(container: HTMLElement, zoom: number): void;
 
   public getInnerElement(): HTMLElement {
     return this.inner;

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -771,7 +771,7 @@ export class OpenSheetMusicDisplay {
             backend = new CanvasVexFlowBackend(this.rules);
         }
         backend.graphicalMusicPage = page; // the page the backend renders on. needed to identify DOM element to extract image/SVG
-        backend.initialize(this.container);
+        backend.initialize(this.container, this.zoom);
         return backend;
     }
 

test/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer_Test.ts

@@ -24,7 +24,7 @@ describe("VexFlow Music Sheet Drawer", () => {
         // Create the canvas in the document:
         const canvas: HTMLCanvasElement = document.createElement("canvas");
         const backend: VexFlowBackend = new CanvasVexFlowBackend(sheet.Rules);
-        backend.initialize(canvas);
+        backend.initialize(canvas, 1.0);
         const drawer: VexFlowMusicSheetDrawer = new VexFlowMusicSheetDrawer();
         drawer.Backends.push(backend);
         drawer.drawSheet(gms);