generateTexture.js

generateTexture.js

export const generateTexture = (text) => {
  // Set variables
  const bitmapShift = 80;
  const copyAmount = 4;
  const canvasSize = 300;
  const fontSize = canvasSize / copyAmount;
  const fontStyle = `Bold ${fontSize}px Arial`;

  // Create canvas
  const bitmap = document.createElement("canvas");
  bitmap.height = canvasSize;

  // Create 2d context
  const g = bitmap.getContext("2d");
  g.font = fontStyle;
  bitmap.width = g.measureText(text).width;

  // Add font style again
  g.fillStyle = "blue";
  g.font = fontStyle;

  // Add text on the canvas
  const scaledText = (index) =>
    g.fillText(text, 0, fontSize * ++index - bitmapShift);

  Array(copyAmount + 1)
    .fill(0)
    .forEach((item, i) => {
      scaledText(i);
    });

  const background = bitmap.toDataURL("image/png");
  return background;
};