title: Fastest algorithm to draw a crossword grid in <canvas>?
body: <p>I'm rendering a grid of cells, very much like the grid you find in a crossword puzzle, but using four different colors to fill each cell (not only black or white). </p>
  
  <p>The grid size is about 160x120, and I need to render it as fast as possible, as it will be used to display a <a href="http://en.wikipedia.org/wiki/Cellular_automaton" rel="noreferrer" title="Cellular automaton">Cellular automaton</a> animation.</p>
  
  <p>I have tried two different approaches to render the grid:</p>
  
  <ul>
  <li><p>Render each cell using something like:</p>
  
  <pre><code>var w = x + step;
  var h = y + step;
  canvasContext.fillStyle=cell.color;
  canvasContext.fillRect(x+1,y+1,w-1,h-1);
  canvasContext.strokeRect(x,y,w,h);
  </code></pre></li>
  <li><p>Render the all of cells without the border, and then render the grid lines using:</p>
  
  <pre><code>var XSteps = Math.floor(width/step);
  canvasContext.fillStyle = gridColor;
  for (var i = 0, len=XSteps; i&lt;len; i++) {
      canvasContext.fillRect(i*step, 0, 1, height);
  }
  //Similar thing for Y coord
  </code></pre></li>
  </ul>
  
  <p>Both algorithms perform poorly: it is slower to draw the grid than the cells in both cases. Am I missing something? How can I optimize those algorithms? Is there another way I should try?</p>
  
  <p>Note: the grid moves, as the user can displace it or zoom the view.</p>
  
  <p>The general question will be: what is the fastest algorithm to draw a grid of cells on a  element?</p>