title: HTML5 Canvas JavaScript Crosshair Grid
body: <p>I wanted to make a crosshair grid (every 10px).
  I had many problems with it. Can it be done in easier way than 3x For loop?
  <a href="http://jsfiddle.net/TnnRp/1/" rel="nofollow">http://jsfiddle.net/TnnRp/1/</a></p>
  
  <pre><code>var canvas = document.getElementById('grid');
  var context = canvas.getContext('2d');
  // grid
  var width = canvas.width;
  var height = canvas.height;
  var p = 10;
  var h = 10;
  for (var i = 10; i &lt;= width - 5; i += 10) {
      for (var e = 10; e &lt;= height - 5; e += 10) {
          context.moveTo(h + 0.5, e - 1);
          context.lineTo(h + 0.5, e + 2);
      }
      h += 10;
      for (var f = 10; f &lt;= width - 5; f += 10) {
          context.moveTo(f - 1, p + 0.5);
          context.lineTo(f + 2, p + 0.5);
      }
      p += 10;
  }
  context.stroke();
  </code></pre>