Drawing a grid on canvas
Try using a SVG object on the canvas:

&lt;svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;defs&gt;
        &lt;pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"&gt;
            &lt;path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5" /&gt;
        &lt;/pattern&gt;
        &lt;pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"&gt;
            &lt;rect width="80" height="80" fill="url(#smallGrid)" /&gt;
            &lt;path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1" /&gt;
        &lt;/pattern&gt;
    &lt;/defs&gt;

    &lt;rect width="100%" height="100%" fill="url(#smallGrid)" /&gt;
&lt;/svg&gt;


produces a grid like this:



whereas changing fill="url(#smallGrid)" to fill="url(#grid)" produces the following:



Which then you can feed into the canvas like the following:



var drawGrid = function(w, h, id) {
    var canvas = document.getElementById(id);
    var ctx = canvas.getContext('2d');
    ctx.canvas.width  = w;
    ctx.canvas.height = h;
    
    var data = '&lt;svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"&gt; \
        &lt;defs&gt; \
            &lt;pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"&gt; \
                &lt;path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5" /&gt; \
            &lt;/pattern&gt; \
            &lt;pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"&gt; \
                &lt;rect width="80" height="80" fill="url(#smallGrid)" /&gt; \
                &lt;path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1" /&gt; \
            &lt;/pattern&gt; \
        &lt;/defs&gt; \
        &lt;rect width="100%" height="100%" fill="url(#smallGrid)" /&gt; \
    &lt;/svg&gt;';

    var DOMURL = window.URL || window.webkitURL || window;
    
    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svg);
    
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }
    img.src = url;
}
drawGrid(800, 400, "grid");
&lt;canvas id="grid"&gt;&lt;/canvas&gt;




Of course, you'll need to play around with the sizes of the grid to match what you want. However you'll find that this method is much faster.