const config = {
  characterSet: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-ⅠⅡ←→[]?()/+',
  characterWidth: 7,
  characterHeight: 7,
  horizontalSpacing: 1,
  verticalSpacing: 1,
  columnCount: 10,
  rowCount: 5,
};

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 200;
canvas.style.border = '1px solid gray';
document.body.appendChild(canvas);

const context = canvas.getContext('2d');

context.imageSmoothingEnabled = false;

const image = new Image();
image.addEventListener('load', () => {
  drawText('THE DOG BARKS\nVERY LOUDLY\nAT THE FENCE', { x: 10, y: 20 }, 3, 'center');
});
image.src = 'https://i.imgur.com/i4mFBB5.png';

function drawCharacter(character, position = { x: 0, y: 0 }, scale = 1) {
  const characterIndex = config.characterSet.indexOf(character);
  
  if (characterIndex === -1) {
    throw new Error(`Font character "${character}" is not defined`);
  }

  const rowIndex = Math.floor(characterIndex / config.columnCount);
  const columnIndex = characterIndex % config.columnCount;
  
  const {
    characterWidth,
    characterHeight,
    horizontalSpacing,
    verticalSpacing,
  } = config;

  const sourceX = columnIndex * (characterWidth + horizontalSpacing);
  const sourceY = rowIndex * (characterHeight + verticalSpacing);
  const sourceWidth = characterWidth;
  const sourceHeight = characterHeight;

  const destinationX = position.x;
  const destinationY = position.y;
  const destinationWidth = characterWidth * scale;
  const destinationHeight = characterHeight * scale;

  context.drawImage(
    image,
    sourceX, sourceY, sourceWidth, sourceHeight,
    destinationX, destinationY, destinationWidth, destinationHeight
  );
}

function drawWord(word, position = { x: 0, y: 0 }, scale = 1, optCharacterSpacing = 1) {
  const characters = Array.from(word);

  characters.forEach((character, characterIndex) => {
    let characterSpacing = optCharacterSpacing;
    if (characterIndex === 0) {
      characterSpacing = 0;
    }

    const characterTotalWidth = config.characterWidth * scale + characterSpacing;

    const characterX = position.x + characterIndex * characterTotalWidth;
    const characterY = position.y;

    const characterPosition = {
      x: characterX,
      y: characterY,
    };

    drawCharacter(character, characterPosition, scale);
  });
}

function getWordWidth(word, scale = 1, optCharacterSpacing = 1) {
  const allCharactersWidth = word.length * (config.characterWidth * scale);
  const allSpacingsWidth = (word.length - 1) * optCharacterSpacing;

  const wordWidth = allCharactersWidth + allSpacingsWidth;

  return wordWidth;
}

function drawLine(
  line,
  position = { x: 0, y: 0 }, 
  scale = 1,
  optCharacterSpacing = 1,
) {
  const words = line.split(' ');

  let prevWordEndX = 0;
  
  words.forEach((word, wordIndex) => {
    const wordX = position.x + prevWordEndX;
    const wordY = position.y;
    const wordPosition = {
      x: wordX,
      y: wordY,
    };
    
    drawWord(word, wordPosition, scale, optCharacterSpacing);
    
    const wordWidth = getWordWidth(word, scale, optCharacterSpacing);
    
    let wordSpacing = config.characterWidth * scale + optCharacterSpacing * 2;
    if (wordIndex === words.length - 1) {
      wordSpacing = 0;
    }
    
    const wordTotalWidth = wordWidth + wordSpacing;
    
    prevWordEndX += wordTotalWidth;
  });
}

function getLineWidth(line, scale = 1, optCharacterSpacing = 1) {
  let lineWidth = 0;
  
  const words = line.split(' ');
  words.forEach((word, wordIndex) => {
    const wordWidth = getWordWidth(word, scale, optCharacterSpacing);
    
    let wordSpacing = config.characterWidth * scale + optCharacterSpacing * 2;
    if (wordIndex === 0) {
      wordSpacing = 0;
    }
    
    const worldTotalWidth = wordWidth + wordSpacing;
    
    lineWidth += worldTotalWidth;
  });
  
  return lineWidth;
}

function getTextWidth(text, scale = 1, optCharacterSpacing = 1) {
  const lines = text.split('\n');
  
  const lineWidths = lines.map((line) => {
    return getLineWidth(line, scale, optCharacterSpacing);
  });
  
  const maxLineWidth = Math.max(...lineWidths);

  return maxLineWidth;
}

function drawText(
  text,
  position = { x: 0, y: 0 },
  scale = 1,
  align = 'left',
  optLineSpacing = 10,
  optCharacterSpacing = 1,
) {
  const textWidth = getTextWidth(text, scale, optCharacterSpacing);

  const lines = text.split('\n');
  
  lines.forEach((line, lineIndex) => {
    let lineSpacing = optLineSpacing;
    if (lineIndex === 0) {
      lineSpacing = 0;
    }
    
    const lineWidth = getLineWidth(line, scale, optCharacterSpacing);
    
    let lineX = position.x;
    if (align === 'center') {
      lineX += (textWidth - lineWidth) / 2;
    } else if (align === 'right') {
      lineX += textWidth - lineWidth;
    }

    const lineTotalHeight = config.characterHeight * scale + lineSpacing;
    
    const lineY = position.y + lineTotalHeight * lineIndex;
    
    const linePosition = {
      x: lineX,
      y: lineY,
    };
    
    drawLine(line, linePosition, scale, optCharacterSpacing);
  });
}