Font weight is not working in node-canvas

70 views Asked by At

I am registering a font family with normal weight, and then setting fontWeight in fabricjs object with bold. I don't see any difference with bold or normal fontWeight.

Here is the code to generate image for text objects using fabricjs.

var fs = require("fs"),
  fabric = require("fabric").fabric,
  imageDataURI = require("image-data-uri"),
  fetch = require("node-fetch");
(async () => {
  const res = await fetch(
    "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf",
  );
  const fileStream = fs.createWriteStream("./font.ttf");
  await new Promise((resolve, reject) => {
    res.body.pipe(fileStream);
    res.body.on("error", reject);
    fileStream.on("finish", resolve);
  });
  main();
})();

const main = () => {
  fabric.nodeCanvas.registerFont(__dirname + "/font.ttf", {
    family: "Press Start 2P Regular",
    weight: "normal",
  });

  const textWithBoldFontWeight = {
    objects: [
      {
        type: "textbox",
        version: "5.3.0",
        originX: "left",
        originY: "top",
        left: 323.81,
        top: 208.9,
        width: 323.89,
        height: 79.09999999999998,
        fill: "rgba(255, 255, 255, 1)",
        stroke: "#000",
        strokeWidth: 0,
        strokeDashArray: [],
        strokeLineCap: "butt",
        strokeDashOffset: 0,
        strokeLineJoin: "miter",
        strokeUniform: true,
        strokeMiterLimit: 4,
        scaleX: 0.39,
        scaleY: 0.39,
        angle: 0,
        flipX: false,
        flipY: false,
        opacity: 1,
        visible: true,
        backgroundColor: "",
        fillRule: "nonzero",
        paintFirst: "stroke",
        globalCompositeOperation: "source-over",
        skewX: 0,
        skewY: 0,
        fontFamily: "Press Start 2P Regular",
        fontWeight: "bold",
        fontSize: 70,
        text: "Headline",
        underline: false,
        overline: false,
        linethrough: false,
        textAlign: "center",
        fontStyle: "normal",
        lineHeight: 1.16,
        textBackgroundColor: "",
        charSpacing: 0,
        styles: [],
        direction: "ltr",
        path: null,
        pathStartOffset: 0,
        pathSide: "left",
        pathAlign: "baseline",
        minWidth: 20,
        splitByGrapheme: false,
      },
    ],
    background: "rgba(0, 0, 0, 0)",
  };

  fabric?.Textbox?.fromObject(
    textWithBoldFontWeight.objects[0],
    async function (obj) {
      try {
        const image = obj.toDataURL({
          format: "image/png",
          withoutShadow: false,
        });
        await imageDataURI.outputFile(
          image,
          "./text-with-bold-font-weight.png",
        );
      } catch (error) {
        reject(error);
      }
    },
  );

  const textWithNormalFontWeight = {
    objects: [
      {
        type: "textbox",
        version: "5.3.0",
        originX: "left",
        originY: "top",
        left: 323.81,
        top: 208.9,
        width: 323.89,
        height: 79.09999999999998,
        fill: "rgba(255, 255, 255, 1)",
        stroke: "#000",
        strokeWidth: 0,
        strokeDashArray: [],
        strokeLineCap: "butt",
        strokeDashOffset: 0,
        strokeLineJoin: "miter",
        strokeUniform: true,
        strokeMiterLimit: 4,
        scaleX: 0.39,
        scaleY: 0.39,
        angle: 0,
        flipX: false,
        flipY: false,
        opacity: 1,
        visible: true,
        backgroundColor: "",
        fillRule: "nonzero",
        paintFirst: "stroke",
        globalCompositeOperation: "source-over",
        skewX: 0,
        skewY: 0,
        fontFamily: "Press Start 2P Regular",
        fontWeight: "normal",
        fontSize: 70,
        text: "Headline",
        underline: false,
        overline: false,
        linethrough: false,
        textAlign: "center",
        fontStyle: "normal",
        lineHeight: 1.16,
        textBackgroundColor: "",
        charSpacing: 0,
        styles: [],
        direction: "ltr",
        path: null,
        pathStartOffset: 0,
        pathSide: "left",
        pathAlign: "baseline",
        minWidth: 20,
        splitByGrapheme: false,
      },
    ],
    background: "rgba(0, 0, 0, 0)",
  };

  fabric?.Textbox?.fromObject(
    textWithNormalFontWeight.objects[0],
    async function (obj) {
      try {
        const image = obj.toDataURL({
          format: "image/png",
          withoutShadow: false,
        });
        await imageDataURI.outputFile(
          image,
          "./text-with-normal-font-weight.png",
        );
      } catch (error) {
        reject(error);
      }
    },
  );
};

The 2 images generated are the same. For first image I provided fontWeight as bold and for second I provided fontWeight as normal.

0

There are 0 answers