Текст отображается дважды в разных шрифтах | Javascript Canvas

Question

Я создаю игру, используя javascript на repl.it. У меня возникла проблема с экраном меню моей игры. Текст заголовка для моей игры отображается дважды в разных шрифтах. Однако, если я обновлю окно, текст будет отображаться нормально. Что вызывает это и как я могу это исправить? Спасибо.

Игра: Игра
Мой код: Код

(изображение ошибки)

Answer 1

Вам нужно запустить ctx.clearRect(0, 0, width, height) перед отображением текста в функции меню, чтобы очистить ранее нарисованный текст перед повторной его перерисовкой.

function menu() {
    ctx.clearRect(0, 0, width, height);
    ctx.font = "75px Oswald";
    ctx.textAlign = "center";
    ctx.fillStyle = txtColor;
    ctx.fillText("Almost Pong!", 250, 200);
    ctx.font = "25px Oswald";
    ctx.fillText("space for two player", 250, 250);
    ctx.fillText("c for one player", 250, 300);
    if (start) {
      addEventListener('keydown', keyDown2, false); addEventListener('keyup', keyUp2, false);
      start = false;
      clearInterval(me_nu);
      anim = setInterval(game, 10);
    }
    if (compStart) {
      p1.name = "CPU";
      compStart = false;
      clearInterval(me_nu);
      anim = setInterval(game, 10);
      compute = true;
    }
 }

Фиксированный код: https://repl.it/repls/MediumpurpleNearMalware

Результат: https://mediumpurplenearmalware - five-nine.repl.co