title: Is drawing circles really this inefficient compared to rectangles?
body: <p>I'm working on a very small project in JavaScript just to help me understand the canvas from the bottom up. I'm trying to avoid using frameworks and the like for now, just so I can understand the basic functionality of HTML5 games.</p>
  
  <p>It's a fairly basic "cursor mover" with a fading tail. That's it. Just a shape in one color, moving around based on player input, with a fading tail. I suggest you try it out; it's actually quite pretty.</p>
  
  <p>Anyways, obviously I'd prefer the cursor to be a circle because it looks smoother. However, whenever I do so, the browser pretty much completely locks up on me. It clearly works, at least to a good extent, but it's slower than a turtle running through frozen peanut butter.</p>
  
  <p>I know I'm not supposed to include <em>just</em> JSFiddle, but it's kind of a lot of code and the whole thing is running slowly.</p>
  
  <p>The problem is most likely in the draw function:</p>
  
  <pre><code>Game.draw = function() {
      for (var sn = 0; sn &lt; this.strokes.length; sn++) {
          var s = this.strokes[sn];
  /*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
          this.context.fillStyle = this.bgColor;
  /*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
  /*1*/   //this.context.fill();
          this.context.fillStyle = s.getColor();
  /*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
  /*1*/   this.context.fill();
      }
  };
  </code></pre>
  
  <p>The lines are labeled by approaches. 1 corresponds to circles, while 2 corresponds to rectangles.</p>
  
  <p>Here's the whole project: <a href="http://jsfiddle.net/w4Rg3/3/" rel="nofollow">http://jsfiddle.net/w4Rg3/3/</a></p>
  
  <p>I just find it kind of hard to believe that it's so incredibly much slower to have circles (after seeing all of the projects that JS <em>can</em> do), and that I might be doing something wrong.</p>