Вот пример, как можно создать адаптивную сетку на canvas с помощью JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>Адаптивная сетка на canvas</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const squareSize = width / 8; // Задайте размер квадратиков
for (let y = 0; y < height; y += squareSize) {
for (let x = 0; x < width; x += squareSize) {
context.fillStyle = 'blue';
context.fillRect(x, y, squareSize, squareSize);
}
}
// Последняя строка занимает половину ширины
for (let x = 0; x < width / 2; x += squareSize) {
context.fillStyle = 'blue';
context.fillRect(x, height - squareSize, squareSize, squareSize);
}
</script>
</body>
</html>
```
В этом примере мы использовали `window.innerWidth` и `window.innerHeight`, чтобы задать ширину и высоту canvas в соответствии с размером окна браузера.
`squareSize` - это размер квадратиков, который вы можете настраивать под свои нужды.
Мы используем два вложенных цикла `for` для отрисовки квадратиков с помощью `fillRect`. Верхний цикл отвечает за строки, а внутренний - за столбцы. Каждый квадратик имеет ширину и высоту равные `squareSize`.
В последнем цикле мы рисуем последнюю строку квадратов, занимающую половину ширины canvas.
При изменении размера окна браузера, сетка также будет изменяться автоматически.