Removing text in HTML5 Canvas?

I'm working on a HTML5 Canvas project and have some text drawn on the screen. Right now, it appears and just stay there, but what I need is for it to disappear after a few seconds so that every time it's called it's not just new text being drawn on top of the old text.

I tried clearRect() but that completely clears the entire rectangle and removes some of my background too, which I don't want.

Is there a way to do this?

I'm drawing the text with this basic function:

    function drawText() {

        ctx.font = "30px Arial";
        ctx.fillText("Please wait...", 575, 130);

    }

Solution

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <button onclick="showTheText()">Click to show text</button>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      
      function showTheText() {
        var myText = {
          text: 'Hello World',
          x: 0,
          y: 75,
          fill: 1
        };

        drawText(myText, context);

        // wait one second before starting animation
        setTimeout(function() {
          animate(myText, canvas, context);
        }, 1000);
      }

      function drawText(myText, context) {
        context.font="30px Arial";
        context.fillStyle="rgb(0, 0, 0, " + myText.fill + ")";
        context.fillText(myText.text, myText.x, myText.y);
      }
      function animate(myText, canvas, context) {
        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);
        // !!!!!!!! redraw your background !!!!!!!!

		    // then redraw your text with new opacity
        myText.fill -= .1;
        drawText(myText, context);

        // request new frame
        if (myText.fill > -.1) {
          setTimeout(function() {
            animate(myText, canvas, context);
          }, 2000 / 60);
        }
      }

    </script>
  </body>
</html>

Hope this can help you. What it does it immediately draws the text (and the rest of your background, you didn't provide it), then sets up a recursive timeout that will clear the rect, redraw your background, decrement the amount of opacity to apply to the text's fill, and redraw the text as well. You can slow it down by changing the time of the last setTimeout.

I adapted it from this example: https://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/