fix: text rendered

package.json

@@ -1,6 +1,6 @@
 {
   "name": "songcard",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "main": "src/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

src/index.js

@@ -1,4 +1,4 @@
 const { classicCard } = require("./themes/classicCard");
 const { simpleCard } = require("./themes/simpleCard");
 
-module.exports = { classicCard, simpleCard }
+module.exports = { classicCard, simpleCard };

src/themes/classicCard.js

@@ -8,7 +8,6 @@ async function classicCard({
   trackDuration,
   trackTotalDuration,
 }) {
-
   const prettyMilliseconds = (await import("pretty-ms")).default;
   const canvasWidth = 1200;
   const canvasHeight = 400;
@@ -49,7 +48,7 @@ async function classicCard({
     progressX,
     0,
     progressX + progressWidth,
-    0
+    0,
   );
 
   gradients.addColorStop(0, "white");
@@ -65,7 +64,7 @@ async function classicCard({
     progressY,
     progressWidth,
     progressHeight,
-    borderRadius1
+    borderRadius1,
   );
   ctx.fill();
 
@@ -130,7 +129,7 @@ async function classicCard({
     0,
     0,
     canvasWidth,
-    canvasHeight
+    canvasHeight,
   );
 
   ctx.save();
@@ -141,21 +140,21 @@ async function classicCard({
     imageX + imageSize,
     imageY,
     imageX + imageSize,
-    imageY + borderRadius
+    imageY + borderRadius,
   );
   ctx.lineTo(imageX + imageSize, imageY + imageSize - borderRadius);
   ctx.quadraticCurveTo(
     imageX + imageSize,
     imageY + imageSize,
     imageX + imageSize - borderRadius,
-    imageY + imageSize
+    imageY + imageSize,
   );
   ctx.lineTo(imageX + borderRadius, imageY + imageSize);
   ctx.quadraticCurveTo(
     imageX,
     imageY + imageSize,
     imageX,
-    imageY + imageSize - borderRadius
+    imageY + imageSize - borderRadius,
   );
   ctx.lineTo(imageX, imageY + borderRadius);
   ctx.quadraticCurveTo(imageX, imageY, imageX + borderRadius, imageY);

src/themes/simpleCard.js

@@ -1,4 +1,4 @@
-const { createCanvas, loadImage } = require("canvas");
+const { registerFont, createCanvas, loadImage } = require("canvas");
 const Jimp = require("jimp");
 
 async function simpleCard({ imageBg, imageText }) {
@@ -41,7 +41,7 @@ async function simpleCard({ imageBg, imageText }) {
     0,
     0,
     canvasWidth,
-    canvasHeight
+    canvasHeight,
   );
 
   ctx.save();
@@ -52,21 +52,21 @@ async function simpleCard({ imageBg, imageText }) {
     imageX + imageSize,
     imageY,
     imageX + imageSize,
-    imageY + borderRadius
+    imageY + borderRadius,
   );
   ctx.lineTo(imageX + imageSize, imageY + imageSize - borderRadius);
   ctx.quadraticCurveTo(
     imageX + imageSize,
     imageY + imageSize,
     imageX + imageSize - borderRadius,
-    imageY + imageSize
+    imageY + imageSize,
   );
   ctx.lineTo(imageX + borderRadius, imageY + imageSize);
   ctx.quadraticCurveTo(
     imageX,
     imageY + imageSize,
     imageX,
-    imageY + imageSize - borderRadius
+    imageY + imageSize - borderRadius,
   );
   ctx.lineTo(imageX, imageY + borderRadius);
   ctx.quadraticCurveTo(imageX, imageY, imageX + borderRadius, imageY);
@@ -96,12 +96,12 @@ async function simpleCard({ imageBg, imageText }) {
     truncatedText += "...";
 
     ctx.fillStyle = "#fff";
-    ctx.font = "35px Sans";
+    ctx.font = `35px Sans`;
     ctx.textAlign = "center";
     ctx.fillText(truncatedText, textX, textY);
   } else {
     ctx.fillStyle = "#fff";
-    ctx.font = "35px Sans";
+    ctx.font = `35px Sans`;
     ctx.textAlign = "center";
     ctx.fillText(text, textX, textY);
   }