title: Speed up the drawing of many points on a HTML5 canvas element
body: <p>I need to draw a lot of points on a HTML5 canvas, and it is taking pretty long. My code looks like this:</p>
  
  <pre><code>var points = getPoints() // Array of {x,y,color}
  var ctx = canvas.getContext("2d");
  
  for (var i = 0; i &lt; points.length; i++) {
     ctx.fillStyle = points[i].color
     ctx.beginPath()
     ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true)
     ctx.fill() }
  </code></pre>
  
  <p>I am wondering what performance tweaks I could do to speed this up. I only have 5 different colors. For example, would I benefit form sorting the points list on-the-fly to change <code>ctx.fillStyle</code> only 5 times instead of one time per point?</p>