title: Javascript Canvas Flashing When Drawing Frames
body: <p>Been having issues with this for a couple days, not sure why the text I'm rendering on the canvas is flashing so much. I'm using the requestAnimationFrame() function, but its still flickering.</p>
  <p>What I want to have happen is for the text to move smoothly and they remove themselves from the array when they move completely off screen.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("myCanvas");
  
  var c = canvas.getContext('2d');
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  var w = canvas.width;
  var h = canvas.height;
  
  var texts = [];
  
  window.addEventListener("load", init);
  
  function init() {
      draw();
      mainLoop();
  }
  
  
  function mainLoop() {
      texts.push(createText("wow", "blue"));
      texts.push(createText("wow", "green"));
      texts.push(createText("wow", "red"));
      setTimeout(function() { mainLoop(); }, 100);
  }
  
  function Text(x, y, vx, vy, varText, theColor){
      this.x = x;
      this.y = y;
      this.vx = vx;
      this.vy = vy;
      this.color = theColor;
      this.draw = function() {
          drawStroked(varText, this.x, this.y, this.color);
      }
  }
  
  function drawStroked(text, x, y, color) {
      c.font = "30px bold Comic Sans MS";
      c.strokeStyle = 'black';
      c.lineWidth = 8;
      c.strokeText(text, x, y);
      c.fillStyle = color;
      c.fillText(text, x, y);
  }
  
  function createText(varText, color) {
      var x = (Math.random() * w / 2 ) + w/4;
      var y = (Math.random() * h / 2) + h/2;
      var vx = (Math.random() * .5) - .25
      var vy = -(Math.random() * 3) - 1
  
      return new Text(x, y, vx, vy, varText, color);
  }
  
  function draw() {
      c.clearRect(0, 0, c.canvas.width, c.canvas.height);
      for(var i = 0;i &lt; texts.length; i++) {
          var currentText = texts[i];
          currentText.x += currentText.vx;
          currentText.y += currentText.vy;
          currentText.draw();
  
          if(currentText.x&gt;w||currentText.x&lt;0||currentText.y&lt;10){
              texts.splice(i, 1);
          }
      }
  
      requestAnimationFrame(draw);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Game Screen&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>