Alena_03,
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#canvas {
background-color: #F4F4F4;
}
#canvas-container{
text-align: center;
}
</style>
</head>
<body>
<div id="canvas-container">
<canvas id="canvas" width="400" height="400" ></canvas>
</div>
<script>
var elem = document.getElementById('canvas');
var ctx = elem.getContext('2d');
var width = elem.width,
distance = 100, // размер квадрата
padding = 65; // расстояние между квадратами
var x = (width - distance) / 2;
var y = (width - distance * 2 - padding) / 2;
var y2 = y + padding + distance;
ctx.fillStyle = 'green';
ctx.fillRect(x, y, distance, distance);
ctx.fillStyle = 'red';
ctx.fillRect(x, y2, distance, distance);
distance = 300; // размер сетки
var d = 15; // размер ячейки
var m = (d/2|0) + .5;
var k = (width - distance) / 2 + m;
var endDistance = k + distance - m;
for (var x = k; x < endDistance ; x += d) {
ctx.moveTo(x, k - m);
ctx.lineTo(x, endDistance);
ctx.moveTo(k - m , x );
ctx.lineTo(endDistance, x );
}
ctx.strokeStyle = '#3300FF';
ctx.stroke();
</script>
</body>
</html>