Center text instead of doing weird calculation

[brackets.git] / frontend / index.js

diff --git a/frontend/index.js b/frontend/index.js
index 07d0d2d..423a641 100644 (file)
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -76,7 +76,7 @@ const drawBranchFrom = (ctx, x, y, xDist, yDist, left, up) => {
 }
 
 const drawArtistOnCtx = (ctx, artistName, x, y) => {
-    ctx.font = "1em sans serif";
+    ctx.font = "20px sans serif";
     ctx.strokeText(artistName, x, y);
 }
 
@@ -130,15 +130,17 @@ const drawBracket = (canvas, artists, genre) => {
     drawWinner(canvas);
     const [mid_x, mid_y] = getCenter(canvas);
     context.font = '28px sans serif'
-    context.strokeText(genre.toUpperCase(), mid_x - (28 * (genre.length / 3)), 40);
+    context.textAlign = "center";
+    context.strokeText(genre.toUpperCase(), mid_x, 40);
+    context.textAlign = "start";
     const [rect_width, rect_height] = getRectangleDimensions(canvas);
     const groups = 4;
     const rounds = Math.floor(Math.log2(artists.length / groups));
     for (let group = 1; group <= groups; group++) {
             drawMatchup(
                 canvas,
-                mid_x + (Math.pow(-1, group) * (rect_width / 4)),
-                mid_y + (Math.pow(-1, Math.floor(group / 2)) * (rect_height * 2)),
+                mid_x + (Math.pow(-1, group) * (rect_width / 6)),
+                mid_y + (Math.pow(-1, Math.floor(group / 2)) * (rect_height * 2.5)),
                 0,
                 rounds,
                 Math.pow(-1, group),