Adjusted rendering of half note rhythm stem

src/rendering/TabBarRenderer.ts

@@ -293,9 +293,8 @@ export class TabBarRenderer extends BarRendererBase {
                 let y1: number = cy + this.y;
                 let y2: number = cy + this.y + this.height - this._tupletSize;
                 let startGlyph: TabBeatGlyph = this.getOnNotesGlyphForBeat(beat) as TabBeatGlyph;
-                if (!startGlyph.noteNumbers) {
-                    y1 +=
-                        this.height -
+                if (!startGlyph.noteNumbers || beat.duration === Duration.Half) {
+                    y1 += this.height -
                         this.settings.notation.rhythmHeight * this.settings.display.scale -
                         this._tupletSize;
                 } else {
@@ -491,14 +490,14 @@ export class TabBarRenderer extends BarRendererBase {
             canvas.moveTo(x, y);
 
             let lineY = topY;
-            // draw until next hole
-            if (holes.length > 0) {
+            // draw until next hole (if hole reaches into line)
+            if (holes.length > 0 && holes[holes.length -1].bottomY > lineY) {
                 const bottomHole = holes.pop()!;
                 lineY = cy + bottomHole.bottomY;
                 canvas.lineTo(x, lineY);
                 y = cy + bottomHole.topY;
             } else {
-                canvas.lineTo(x, topY);
+                canvas.lineTo(x, lineY);
                 break;
             }
         }
@@ -522,7 +521,7 @@ export class TabBarRenderer extends BarRendererBase {
             let y1: number = cy + this.y;
             let y2: number = cy + this.y + this.height - this._tupletSize;
             let startGlyph: TabBeatGlyph = this.getOnNotesGlyphForBeat(beat) as TabBeatGlyph;
-            if (!startGlyph.noteNumbers) {
+            if (!startGlyph.noteNumbers || beat.duration === Duration.Half) {
                 y1 +=
                     this.height - this.settings.notation.rhythmHeight * this.settings.display.scale - this._tupletSize;
             } else {

test/visualTests/PixelMatch.ts

@@ -107,22 +107,25 @@ export class PixelMatch {
 
         // check if images are identical
         const len = width * height;
-        const a32 = new DataView(img1.buffer);
-        const b32 = new DataView(img2.buffer);
         let identical = true;
         let transparentPixels = 0;
 
         for (let i = 0; i < len; i++) {
-            if (a32.getInt32(i, true) !== b32.getInt32(i, true)) {
+            const img1r = img1[(i * 4) + 0];
+            const img1g = img1[(i * 4) + 1];
+            const img1b = img1[(i * 4) + 2];
+            const img1a = img1[(i * 4) + 3];
+
+            const img2r = img2[(i * 4) + 0];
+            const img2g = img2[(i * 4) + 1];
+            const img2b = img2[(i * 4) + 2];
+            const img2a = img2[(i * 4) + 3];
+
+            if (img1r !== img2r || img1g !== img2g || img1b !== img2b || img1a !== img2a) {
                 identical = false;
                 break;
             }
-            if (
-                a32.getUint8(i) === 0xff &&
-                a32.getUint8(i + 1) === 0 &&
-                a32.getUint8(i + 2) === 0 &&
-                a32.getUint8(i + 3) === 0
-            ) {
+            if (img1a === 0) {
                 transparentPixels++;
             }
         }