How to draw a grid on canvas?

Question

css

How to draw a regular grid on canvas?
In general, the point is that the ball should be drawn on the grid. But redrawing the grid every time is expensive.
Is it possible to draw a background in the form of a grid once and overlay a canvas on it, where the ball will be and redraw it?
Or something like that...
------
Thank you- In general, I figured it out. Here is another answer ru.stackoverflow.com/questions/487637

Answer 1

Did I understand you correctly? - codepen.io/anon/pen/JGZOEX

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

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>