Как переместить текст в Canvas с помощью кнопки, которая вызывает функцию отображения текста в Javascript?

Question

У меня есть холст в HTML id="myCanvas", и кнопка при нажатии вызывает эту функцию:

function writeCanvas(){
     var can = document.getElementById("myCanvas");    
     var ctx = can.getContext("2d"); 
     var xPos = 50;
     var yPos = 50;

     window.addEventListener('click', moveIt, true);

     ctx.fillStyle= "red";
     ctx.font = "30px Arial";
     ctx.fillText("Kunal Sharma", xPos, yPos); 
}

Как сделать так, чтобы при каждом нажатии кнопки текст перемещался вправо или вниз?

Answer 1

Вот простой пример:

<button onclick="drawText()">Move Text</button><br>
<canvas id="myCanvas"></canvas>

<script>
  var can = document.getElementById("myCanvas");
  var ctx = can.getContext("2d");
  var xPos = 10;
  var yPos = 20;

  function drawText() {
    xPos += 10 
    yPos += 10 
    ctx.clearRect(0, 0, 999, 999)
    ctx.fillStyle = "red";
    ctx.font = "30px Arial";
    ctx.fillText("Kunal Sharma", xPos, yPos);
  }
  drawText()
</script>

Идея состоит в том, чтобы изменить xPos & yPos внутри функции.
И мы очищаем и перерисовываем каждый вызов drawText.