Как на canvas-е нарисовать сетку?

Question

[Роман Ракзин]

Как на canvas-е нарисовать обычную сетку?
Вообщем суть в том, что шарик должен отрисовываться на сетке. Но каждый раз перерисовывать сетку затратно.
Можно ли один раз нарисовать фон в виде сетки и наложить на него канвас,где будет шарик и перерисовывать его?
Или что-то подобное...
------
Спасибо- Вообщем разобрался. Здесь ещё ответ ru.stackoverflow.com/questions/487637

Comments

[copal]

Глупости, перерисовывайте её не боясь за быстродействие.

[copal]

Для убедительности могу сказать, что все так делают. В плане правильности лучше каждый кадр перерисовывать весь канвас, нежели создавать множество. Хотя, если бы сетка была не просто сетка, а сетка с программно рисующейся текстурой, то лично я бы создал два канваса, один для статичной графики, другой для динамичной. Первая не перерисовывается очень часто, другая наоборот перерисовывается каждый тик.

Answer 1

[Станислав Третьяков]

Я правильно вас понял? - codepen.io/anon/pen/JGZOEX

<canvas id="setka" width="400" height="400"></canvas>

var c_canvas = document.getElementById("setka");
var context = c_canvas.getContext("2d");

for (var x = 0.5; x < 400; x += 10) {
	context.moveTo(x, 0);
	context.lineTo(x, 400);
}

for (var y = 0.5; y < 400; y += 10) {
	context.moveTo(0, y);
	context.lineTo(400, y);
}

context.strokeStyle = "#888";
context.stroke();

Answer 2

[Dvorak]

var example = document.getElementById("example"),
			    ctx     = example.getContext('2d');
            example.width  = 640;
            example.height = 480;
            ctx.strokeRect(15, 15, 266, 266);
            ctx.strokeRect(18, 18, 260, 260);
            ctx.fillRect(20, 20, 256, 256);
            for (i = 0; i < 8; i += 2)
                for (j = 0; j < 8; j += 2) {
                    ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
                    ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
                }

<canvas id='example'>Обновите браузер</canvas>