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

Question

[MuffinLover]

Пытаюсь сделать сетку на канвасе, которая принимает ширину и высоту и в зависимости от этого длина квадратика разная
но при этом чтобы было адаптивно
выходить что последняя строка квадратов влезает наполовину
Всю голову сломал.
Адаптивность значит, чтобы квадраты становились меньше, но чтобы ширина сохранялась
Условно если ширина 10, то 10 квадратов в строчке(пусть их размер уменьшится)
может уже делал кто?

Comments

[Сергей delphinpro]

непонятно, что не получается? Разделить ширину в пикселях на количество квадратов и получить размер квадрата?

[MuffinLover]

Сергей delphinpro, а если оно не целое, то последняя строчка квадратов может обрезаться на пополам
а если делают увеличение масштаба?

[Сергей delphinpro]

MuffinLover, что значит не целое? 100/10=10, 90/10=9, 89/10=8.9. Дробные пиксели все равно отрисуются. Непонимаю как квадрат аж наполовину обрежется. Вы как-то детальнее свою проблему опишите. Можно даже с вашим кодом.
При увеличении масштаба просто пересчитываются размеры и заново отрисовывается.

[MuffinLover]

Сергей delphinpro, https://codepen.io/codest7/full/PoXvBqJ
вот пример
ожидаю 100 на 100 квадратиков, но совсем беда

[Сергей delphinpro]

MuffinLover, по-моему, вы ожидаете 4х4, что и получаете

[MuffinLover]

Сергей delphinpro, я там забыл сохранить с 100 на 100, но если поменять то будет грустно

[Сергей delphinpro]

MuffinLover, если поменять, то будет 100х100 мелких квадратов.
А вам что нужно?

Я наверное пойду. Вы упорно не желаете детально обрисовать свою проблему.

[MuffinLover]

Сергей delphinpro, У меня есть canvas (холст, поле), и мне нужно заполнить его квадратами одинакового размера. Проблема в том, что поле может быть разного размера, как 800x800, так и 400x300, например. В первом случае я могу заполнить поле квадратами в размерах 100x100 пикселей в ряд и колону по 8 штук, во втором же случае в ряд я могу поместить 4 квадрата, а в колону только 3 (это то, что мне нужно), но получается у меня так: я заполняю ряд из 4 квадратов по 100 пикселей и колону из 4 квадратов по 75 пикселей (квадрат превратился в прямоугольник).

Как правильно определить размеры квадратов, которыми я могу заполнить поле? (чтобы каждая из сторон квадрата была одного размера, а не 100x75)

[Сергей delphinpro]

MuffinLover, ну вот, другое дело.

Найдите наибольший общий делитель от ширины и высоты холста по алгоритму Евклида. Это и будет размер нужного квадрата.

[MuffinLover]

Сергей delphinpro, https://codepen.io/codest7/full/PoXvBqJ
как-то не помогает

[Сергей delphinpro]

MuffinLover, после того, как вы определили размер квадрата, пересчитайте их количество по обеим осям (ширина_холста / ширина_квадрата)

[Алан Гибизов]

MuffinLover, правильно публикуйте codepen! Пользуйтесь кнопкой + в редакторе сообщений.

[Сергей delphinpro]

и в функции нахождения НОД явно косяк.
Насколько помню, там нужно большее число делить на меньшее. То есть нужно из двух параметров сначала найти большее, а не просто делить a на b.

[Сергей delphinpro]

B здесь косяк.
const gcdValue = gcd(rows, cols);
нужно размеры холста брать в пикселях, а не количество квадратов (которое вы не знаете на этом этапе)