How to draw along normal axes in canvas or svg?

Question

Canvas

How to draw on normal axes in canvas and svg?
Those. not by these:

But by such:

I need to draw a figure over the coordinates inserted through the axes, but because
the Y axis goes in html from top to bottom, then naturally it turns out not right.

Answer 1

1. Take the Y coordinate with a minus
2. Multiply both axes by the desired scale factor
3. Add the coordinates of the origin to both coordinates (triple tautology)

Answer 2

Well, choose zero coordinates, for example 100:100, then just invert the ordinate
x = 100 + x1;
y=100 - y1;