Как в canvas или svg рисовать по нормальным осям?

Question

[Артём]

Как в canvas и svg рисовать по нормальным осям?
Т.е. не по таким:

А по таким:

Мне надо над вставленными через осями координат рисовать фигуру по координатам, но т.к.
ось Y идет в html сверху вниз то естественно получается не то.

Answer 1

[dom1n1k]

1. Координату Y брать с минусом
2. Обе оси умножить на нужный масштабный коэффициент
3. К обеим координатам добавить координаты начала координат (тройная тавтология)

Answer 2

[Владимир Проскурин]

Ну так выберите нулевые координаты, например 100:100, потом просто инвертируйте ординату
x = 100 + x1;
y = 100 - y1;

Comments

[Артём]

Не подскажите почему не работает такой код?
Вроде y1 и x1 получают значения input-ов, но они не передаются сюда:
x = 100 + x1;
y = 100 - y1;
Почем? Если просто назначить x1 и y1, а не посредством инпутов, то всё работает

[Владимир Проскурин]

x1, y1 у вас строки (т.к. получены из input), поэтому при x1 = "20" будет x = "66020". Напишите вот так

let x = 660 + parseInt(x1); 
let y = 580 - parseInt(y1);

и лучше сделайте валидацию полей, чтобы можно было вводить только цифры, а то если ввести строку, будет ошибка.

[Артём]

Владимир Проскурин, когда код отрисовки линии находится внутри онклика, линия не рисуется даже если задать x1 и y1 вне онклика, т.е.

А если вынести из онклика вот так:

все работает..
Даже если в онклике только считать значения инпутов и записать в глобальные x1 и x2, то ничего не получается:

Почему-то глобальные x1, x2 не перезаписываются(

[Артём]

Владимир Проскурин, В общем я так понимаю, что бы линия нарисовалась, надо что бы значение x1 и x2 были заданы уже при загрузке страницы, ибо если их задать потом, то ничего не происходит.
И как сделать так, что бы не нужно было обновлять страницу для отрисовки линии? Потому что когда я задаю x1 и y1 через onclick страница ведь не обновляется и линия не рисуется, а если обновить страницу, то переменные сбросятся(
Это можно как-то побороть? Или каким ещё инструментом можно рисовать фигуру по координатам, что бы она рисовалась без обновления страницы?

[Максим Тимофеев]

прежде чем использовать let, надо бы почитать о том чем она отличается от var, а отличается она областью видимости:
https://learn.javascript.ru/let-const