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

Не подскажите почему не работает такой код?
Вроде 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