title: rgba fillStyle with alpha does not get fully opaque if applied multiple times
body: <p>I stubled upon a weird problem. The following code results in making the image fade away because it's overdrawn by a semi-opaque rect over and over again.</p>
  <p>But at least at the 10th  iteration of <code>draw();</code> the image should be completely overdrawn, because the rect should be fully opaque by then, right? But it actually never disappears completely.</p>
  <p>This effect is worse on Chrome than it is on Firefox. But beware: bad screens may hide this faulty behaviour =)</p>
  <p>I also made a <a href="http://jsfiddle.net/bvRt3/1/" rel="nofollow noreferrer">demo</a> on jsFiddle.</p>
  <pre><code>$(function () {
  var canvas = $(&quot;#mycanvas&quot;),
      ctx = canvas[0].getContext(&quot;2d&quot;),
      imgUrl = &quot;http://it-runde.de/dateien/2009/august/14/25.png&quot;;
  
  
  var image = new Image();  
  image.src = imgUrl ;  
  $(image).load(function() {
      ctx.drawImage(image, 0, 0, canvas.width(), canvas.height());
      draw();
  });
  
  function draw() {        
      ctx.fillStyle = &quot;rgba(255, 255, 255, 0.1)&quot;;
      ctx.fillRect(0, 0, canvas.width(), canvas.height());
      setTimeout(draw, 100);
      
  }    
  });
  </code></pre>
  <p>The effect one may want to achieve is that, say an object is moving all over the canvas, and the already drawn positions get overdrawn only slightly so after-glow of after-fade effect. But this result is just fugly.</p>
  <p>So is there any solution to this?</p>