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>
<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();