Мне нужна помощь в удалении изображения с холста

Question

Мне нужна помощь, я пытаюсь удалить символ, когда вы нажимаете левую клавишу со стрелкой, а затем создаете новый. Я не могу понять, как удалить персонажа. Вот мой код:

  var canvas = document.createElement('canvas');
    var c = canvas.getContext('2d');
  canvas.width = 1000;
  canvas.height = 600;
    document.body.appendChild(canvas);

  var NANONAUT_HEIGHT = 10;
  var NANONAUT_WIDTH = 240;

  window.addEventListener('keydown', onKeyDown);
//  window.addEventListener('keyup', onKeyUp);

  function onKeyDown(event) {
   if(event.keyCode === 39){ 
    if(NANONAUT_HEIGHT <= 240){
      NANONAUT_HEIGHT = NANONAUT_HEIGHT + 10

      for(i = NANONAUT_HEIGHT; i < img.width; i++){
    c.drawImage(nanonaut, NANONAUT_HEIGHT, NANONAUT_WIDTH)
      }
    }
   } 
     console.log(NANONAUT_WIDTH)
  }



  var nanonaut = new Image();
  nanonaut.src = "https://cdn.glitch.com/098e8cf0-b83e-44bc-8aa2-c8316900937f%2FNanonaut.png?1551809807699"
  var img = new Image();
  img.src = "https://cdn.glitch.com/098e8cf0-b83e-44bc-8aa2-c8316900937f%2Fimage.png?1551724673489"

  c.drawImage(img, 10,10);
  c.drawImage(nanonaut, NANONAUT_HEIGHT, NANONAUT_WIDTH)

Извините, если это выглядит нубистски, я только начал с холста. Я пробовал clearRect, но это тоже удаляет img. Любая помощь будет оценена! (Веб-сайт https://project -experiment.glitch.me / , если вы хотите увидеть. (Вам нужно обновить его 2 раза, чтобы увидеть изображения, я не знаю, почему.))

Answer 1

Обычно вы делаете clearRect(0, 0, canvas.width, canvas.height) и рисуете все с нуля при каждом обновлении.

Холст - это просто тупое растровое изображение без понятия слоев или различных объектов.Вы не можете удалить своего персонажа, чтобы показать фон позади, эта часть фона исчезла.Если вы хотите увидеть это снова, вы должны нарисовать это снова.

Answer 2

Спасибо за вашу помощь, но я нашел способ сделать это самостоятельно.

Итак, я бы сделал цикл for, i = NANONAUT_HEIGHT и т. Д. И т. Д., Затем я бы очистилRect (ответ Бена)а затем нарисуйте его снова

Еще раз спасибо!и если кому-то понадобится фрагмент кода, то вы идете.

          if(NANONAUT_WIDTH <= canvas.height - 270){
      NANONAUT_WIDTH = NANONAUT_WIDTH - 30
      
      for(i = NANONAUT_HEIGHT; i < img.width; i++){
    c.clearRect(0, 0, canvas.width, canvas.height)
          c.drawImage(spaceImg, 10,10);
      c.drawImage(nanonaut, NANONAUT_HEIGHT, NANONAUT_WIDTH)
      }
    }