title: How to flicker an image-object for a couple of seconds after a certain time?
body: <p>With a power-up (here with an <code>onclick</code> on the canvas) I make the paddle longer for a couple of seconds before it's getting small again. In some games you see that after a couple of seconds the long paddle begins to flicker and then comes to his normal size again. How do you do that? </p>
  
  <p><strong>This is my JavaScript code:</strong></p>
  
  <pre><code>var canvas = document.getElementById("mijnCanvas");
  var mijnObject = canvas.getContext("2d");
  
  var afbeelding = new Image();
  var balkX = (canvas.width/2)-50;
  var balkY = canvas.height-40;
  
  var balX = canvas.width/2;
  var balY = canvas.height-50;
  var radius = 10;
  var balNaarX = 5;
  var balNaarY = 5;
  
  function makenBalkKort() {
      mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height);
  }
  afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Kort.png";
  
  function makenBal() {
      mijnObject.beginPath();
      var mijnBalGradient = mijnObject.createRadialGradient(balX, balY, 0, balX, balY, 8);
      mijnBalGradient.addColorStop(0, "black");
      mijnBalGradient.addColorStop(1, "white");
      mijnObject.fillStyle = mijnBalGradient;
      mijnObject.strokeStyle = ("black");
      mijnObject.arc(balX, balY, radius, 0, 2*Math.PI, false);
      mijnObject.fill();
      mijnObject.stroke();
      mijnObject.closePath(); 
  }
  
  function tekenenObjecten() {
      mijnObject.clearRect(0, 0, canvas.width, canvas.height);
      makenBal();
      makenBalkKort();
  
      setTimeout(function() {
          if(balX+balNaarX &gt; canvas.width-radius || balX+balNaarX &lt; radius) {
              balNaarX = -balNaarX;
          }
          if(balY+balNaarY &lt; radius) {
              balNaarY = -balNaarY;
          }
          else if(balY+balNaarY &gt; balkY-radius) {
              if(balX &gt; balkX &amp;&amp; balX &lt; balkX + afbeelding.width) {
                  balNaarY = -balNaarY;
              }
              else {
                  alert("Game over");
              }
          }
          balX += balNaarX;
          balY += balNaarY;
      }, 1000);
  }
  setInterval(tekenenObjecten, 20);
  
  window.addEventListener("keydown", function LinksOfRechts() {
      mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height);
      var balkNaarX = 10;
      var code = event.which || event.keyCode;
      if(code == 37) {
          if(balkX &gt; 0) {
              balkX -= balkNaarX;
          }
      }
      else if(code == 39) {
          if(balkX &lt; canvas.width-afbeelding.width) {
              balkX += balkNaarX;
          }
      }
      mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height);
  });
  
  canvas.addEventListener("click", function balkLangMaken() {
      mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height);
      afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Lang.png";
      setTimeout(function() {
          mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height);
          afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Kort.png";
      }, 3000);
  });
  </code></pre>
  
  <p><strong>This is my HTML code:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;BrickSmasher&lt;/title&gt;
  &lt;style&gt;
      canvas {
          position: relative;
          margin-left: auto;
          margin-right: auto;
          display: block; 
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;canvas id="mijnCanvas" width="500" height="500" style="border: 1px solid black"&gt;&lt;/canvas&gt;
    &lt;script src="BrickSmasher.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here are the images:</p>
  
  <p><img src="https://i.stack.imgur.com/sdK7z.png" alt="BrickSmasher_Balk_Kort"></p>
  
  <p><img src="https://i.stack.imgur.com/HnrTf.png" alt="BrickSmasher_Balk_Lang"></p>