/*** MEDIA QUERIES 600-767 ***/
@media screen and (min-width: 500px) and (max-width: 767px) {
ну так это вы начали делать его на канвасе)
о каких "костылях" речь-то?
«HTML5 Canvas тоже можно использовать для создания визуализации, однако генерируемый контент не является частью DOM и к нему нельзя получить доступ. Для решения данной проблемы, вам бы пришлось дублировать контент между открывающим и закрывающим тегом canvas. Такое решение также обеспечивает фоллбэк для старых браузеров. Также придется связать фоллбэк контент с холстом, чтобы при взаимодействии элементы реагировали правильно. Так что в HTML5 Canvas нам потребуется продублировать весь контент [...] А в SVG вы сразу получаете семантичность и доступность вместе с интерактивностью на JS прямо из коробки.»
Счетчик попыток не только для ip но и для логина, потому что могут брутить целевого юзера с разных ip.
А вообще да, вы повторно изобретаете то, что уже давно существует и на уровне методологии и в виде программных продуктов.