Properly center favicon

devgg · Apr 20, 2024 · 57e13a7 · 57e13a7
1 parent 23c2c71
commit 57e13a7
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/src/js/draw.js b/src/js/draw.js
@@ -35,24 +35,38 @@ function setFont(icon, size) {
   ctx.font = fontWeight + ' ' + (icon.si * size) / 100 + 'px "Font Awesome 5 ' + fontSuffix + '"';
 }
 
+function fillText(text) {
+  const textMetrics = ctx.measureText(text);
+  const horizontalAdjustment = (textMetrics.actualBoundingBoxLeft - textMetrics.actualBoundingBoxRight) / 2;
+  const verticalAdjustment = (textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent) / 2;
+  const horizontalCenter = canvasSize / 2 + horizontalAdjustment;
+  const verticalCenter = canvasSize / 2 + verticalAdjustment;
+
+  ctx.fillText(text, horizontalCenter, verticalCenter);
+}
+
 function draw() {
   if (canvasSize > 0) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.fillStyle = s.backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     setFont(s.icon, s.size);
+
     ctx.fillStyle = 'rgba(0, 0, 0, 1)';
     ctx.globalCompositeOperation = 'destination-out';
-    ctx.fillText(s.icon.uc, canvasSize / 2, canvasSize / 2);
+    fillText(s.icon.uc);
+
     ctx.fillStyle = s.foregroundColor;
     ctx.globalCompositeOperation = 'source-over';
+    fillText(s.icon.uc);
 
-    ctx.fillText(s.icon.uc, canvasSize / 2, canvasSize / 2);
     if (s.stackedSelected) {
       ctx.save();
+
       setFont(s.stackedIcon, s.stackedSize);
       ctx.globalCompositeOperation = 'xor';
-      ctx.fillText(s.stackedIcon.uc, canvasSize / 2, canvasSize / 2);
+      fillText(s.stackedIcon.uc);
+
       ctx.restore();
     }
     canvasToFavicon(canvas);