Адаптивная сетка javascript на canvas как?

Адаптивная сетка на JavaScript можно создать на элементе canvas, используя различные методы и свойства этого элемента.

Прежде всего, необходимо создать сам элемент canvas в HTML-разметке:

<canvas id="gridCanvas"></canvas>

Затем, в JavaScript, мы можем получить доступ к этому элементу и получить его контекст рисования:

const canvas = document.getElementById('gridCanvas');
const context = canvas.getContext('2d');

Теперь мы готовы рисовать сетку. Для адаптивной сетки, мы можем использовать методы и свойства canvas для получения размеров экрана и адаптирования сетки к этим размерам.

function drawGrid() {
  const width = canvas.width = window.innerWidth; // устанавливаем ширину canvas по ширине окна
  const height = canvas.height = window.innerHeight; // устанавливаем высоту canvas по высоте окна
  
  const gridSize = 50; // размер клетки сетки
  
  // рисуем горизонтальные линии сетки
  for (let y = gridSize; y < height; y += gridSize) {
    context.beginPath();
    context.moveTo(0, y);
    context.lineTo(width, y);
    context.stroke();
  }
  
  // рисуем вертикальные линии сетки
  for (let x = gridSize; x < width; x += gridSize) {
    context.beginPath();
    context.moveTo(x, 0);
    context.lineTo(x, height);
    context.stroke();
  }
}

drawGrid();

В этом примере, мы используем window.innerWidth и window.innerHeight для определения ширины и высоты окна браузера. Затем, мы устанавливаем ширину и высоту canvas'а равными этим значениям, чтобы адаптировать его к размерам окна. Сетка рисуется с помощью циклов for, которые создают горизонтальные и вертикальные линии.

Также, можно добавить обработчик событий resize, чтобы обновлять размеры canvas'а при изменении размеров окна:

window.addEventListener('resize', function() {
  drawGrid();
});

Таким образом, код выше позволит создать адаптивную сетку на элементе canvas при помощи JavaScript. Всякий раз, когда изменяются размеры окна, сетка будет обновляться и адаптироваться к новым размерам.