title: JavaScript canvas: Ball leaving a trail behind it
body: <p>Developing a simple canvas application where you can shoot bullets with a gun, but the bullet leaves a trail behind it. I've tried clearing the canvas with clearRect and by setting the canvas's width to itself, but no luck. Here's a <a href="https://jsfiddle.net/khanfused/ayo1qfab/1" rel="nofollow">jsFiddle</a>. Relevant snippets:</p>
  
  <p>Bullet.prototype:</p>
  
  <pre><code>Bullet.prototype = {
      render: function () {
          ctx.fillStyle = this.color;
          ctx.arc(this.coordinates.x, this.coordinates.y, this.size.radius, 0, Math.PI * 2, false);
          ctx.fill();
          return this;
      },
      animate: function () {
          this.coordinates.x += this.velocity.speed.x;
          return this;
      }
  };
  </code></pre>
  
  <p>update():</p>
  
  <pre><code>function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      gun.render();
      gun.shoot();
      bullets.forEach(function(bullet) {
          bullet.render().animate();
      });
      requestAnimationFrame(update);
  }
  </code></pre>
  
  <p>How do I prevent the ball from leaving a trail?</p>