title: How to create a canvas animation with one moving triangle/rectangle?
body: <p>The Problem is, that the animation creates a triangle every frame. But I want, that just one triangle moves / be animated. How do I fix this? 
  In the moment canvas draw a triangle on a random X and Y Position and moves to the left and after that to the right and so on. Every Frame canvas creates a new triangle but I just want that canvas animate one triangle.</p>
  
  <pre><code>window.onload = function () {
  
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var W = canvas.width = window.innerWidth;
  var H = canvas.height = window.innerHeight;
  
  var x = Math.floor(Math.random()*W);
  var y = Math.floor(Math.random()*H);
  
  var speed = 20;
  
  function animate() {
  
      reqAnimFrame = window.mozRequestAnimationFrame    ||
                  window.webkitRequestAnimationFrame ||
                  window.msRequestAnimationFrame     ||
                  window.oRequestAnimationFrame
                  ;
  
      reqAnimFrame(animate);
  
      x += speed;
  
      if(x &lt;= 0 || x &gt;= W - 300){
          speed = -speed;
      }
  
      draw();
  }
  
  function draw() {  
      ctx.beginPath();
      ctx.fillStyle = "rgba(0,204,142,0.5)";
      ctx.moveTo(x,y);
      ctx.lineTo(x + 150, y + (-180));
      ctx.lineTo(x + 300, y);
      ctx.scale(1,1);
      ctx.rotate(Math.PI / 1);
      ctx.fill();
  }
  animate();
  
  };//onload function
  </code></pre>