HTML5 Canvas JavaScript Crosshair Grid

Question

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? http://jsfiddle.net/TnnRp/1/

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 <= width - 5; i += 10) {
    for (var e = 10; e <= 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 <= width - 5; f += 10) {
        context.moveTo(f - 1, p + 0.5);
        context.lineTo(f + 2, p + 0.5);
    }
    p += 10;
}
context.stroke();

Answer 1

You can always reduce it to two loops and there are two ways with that as well. But before: I agree with markE - your code is just fine as it is.

My version here is to reduce loops and show one way to optimize its speed:

//pre-translate to force anti-alias
context.translate(0.5, 0.5);

Now we draw just one single cross-hair:

var cc = 1; //cross-hair size

context.moveTo(p / 2, h / 2 - cc);
context.lineTo(p / 2, h / 2 + cc);
context.moveTo(p / 2 - cc, h / 2);
context.lineTo(p / 2 + cc, h / 2);

context.stroke();

And now we "blit" our hearts out, first horizontally:

//replicate drawn cross-hair = faast.
for (i = 0; i < width - p; i += p) {
    if (i > 0) p *= 2;
    context.drawImage(canvas, 0, 0, p, h, p, 0, p,h);
}

And now we replicate that line vertically:

for(i = 0; i < height; i+=h) {
    if (i > 0) h *= 2;
    context.drawImage(canvas, 0, 0, width, h, 0, h, width, h);
}

Notice that we are not just copying one line, but when we have draw one replicate, we duplicate those two, then we skip four and copy the four etc.

This method is super-fast and is the way the browser (or rather the system function the browser uses) also replicate patterns (but with internal compiled code). You could also have used the first cross-hair to set a pattern on an off-screen canvas and filled the canvas with that which could be a notch faster.

Updated fiddle

Answer 2

With Ken's help. Working jsFiddle

var canvas = document.getElementById('grid');
var context = canvas.getContext('2d');

var width = canvas.width,
    height = canvas.height;
context.moveTo(10.5, 10 - 1);
context.lineTo(10.5, 10 + 2);
context.moveTo(10.5 -1, 10.5);
context.lineTo(10.5 +2, 10.5);
context.stroke();
var h=10,
    p=10;

for (i = 0; i < width; i += p) {
    p *= 2;
    context.drawImage(canvas, p, 0);
}
for(i = 0; i < height; i+=h) {
    h *= 2;
    context.drawImage(canvas, 0, h);
}