JavaScript 文字のバウンドアニメーションに残像がついてしまう

Question

前提、実現したいこと

HELLO という文字列を、個々の文字がバウンドしているようなアニメーションを表示したい。
実行環境はローカルのブラウザです。

発生している問題・エラーメッセージ

アニメーションは開始するが、文字の残像がついてしまう。

該当のソースコード

<div id="container"></div>
<script type="text/javascript">

var cvs = document.createElement("canvas");

cvs.width = 500;
cvs.height = 500;
document.getElementById('container').appendChild(cvs);


var ctx = cvs.getContext("2d");
var gravity = 0.5; 
var bounce = -0.7 
var bottom = 450; 

var text1 = new Text("H",100,250,10);
var text2 = new Text("E",150,250,1);
var text3 = new Text("L",200,250,5);
var text4 = new Text("L",250,250,1);
var text5 = new Text("O",300,250,10);


function Text(t,x,y,vy) {
  var me = this;
  this.x = x;
  this.y = y;
  this.vy = vy;

  this.draw = function(ctx) {
    ctx.font = '50px serif';
    ctx.strokeText(t,me.x,me.y);
  };

  this.render = function(){
    me.vy += gravity;
    me.y += me.vy;

    if (me.y + 20 > bottom) {
      me.y = bottom - 20;
      me.vy *= bounce;
    }   

  me.draw(ctx);
  }
  }

  ctx.clearRect(0, 0, 500, 500);
  ctx.strokeStyle = "black";
  ctx.beginPath();
  ctx.moveTo(0, bottom);
  ctx.lineTo(500, bottom);
  ctx.stroke();
  setInterval(text1.render, 30);
  setInterval(text2.render, 30);
  setInterval(text3.render, 30);
  setInterval(text4.render, 30);
  setInterval(text5.render, 30);
</script>

試したこと

Text内のrenderで呼び出されているdrawが、文字の描画を行っていることは確認したが、実装のどこに問題点があるかはわからなかった。

Answer 1

こんなかんじで

setInterval(text1.render, 30);
setInterval(text2.render, 30);
setInterval(text3.render, 30);
setInterval(text4.render, 30);
setInterval(text5.render, 30);
↓↓↓
setInterval(()=>{
  ctx.clearRect(0, 0,500,500);
  text1.render();
  text2.render();
  text3.render();
  text4.render();
  text5.render();
}, 30);

Answer 2

実装のどこに問題点があるかはわからなかった。

間違っているのは実装ではなく、アルゴリズム(詳細仕様)です。

現状は、同じ紙に、前の文字を残したまま、移動後の文字を描画しています。
描画の前に白紙にする処理を加えてください。

なお、動きをつける場合、若干の残像があるほうが見栄えが良くなることが多いので、そちらもご検討ください。