I wonder if there is a way to invert the y-axis of canvas so that the point (0,0) is actually the point (0.500) ....
That is, if I play the value 20 in the Y, instead of starting from the top down, start from the bottom up .....
function altera(valor, ponto) {
document.getElementById('variavel_' + ponto).innerHTML = valor;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
desenhaBase(context, canvas);
}
function desenhaBase(context, canvas) {
X = document.getElementById('valorX').value;
Y = document.getElementById('valorY').value;
X1 = document.getElementById('valorX1').value;
Y1 = document.getElementById('valorY1').value;
context.fillStyle = "white";
context.beginPath();
context.fillRect(0, 0, canvas.width, canvas.height);
context.fill();
context.moveTo(X, Y);
context.lineTo(X1, Y1);
context.strokeStyle = 'blue';
context.stroke();
}<table>
<tr>
<td> x1: <span id="variavel_x"></span>
</td>
<td>y1: <span id="variavel_y"></span>
</td>
</tr>
<tr>
<td>
<input type="range" style="width: 180px;" name="x" id="valorX" min="0" max="375" oninput="altera(this.value,this.name)">
</td>
<td>
<input type="range" style="width: 180px;" name="y" id="valorY" min="0" max="500" oninput="altera(this.value,this.name)">
</td>
</tr>
<tr>
<td> x2: <span id="variavel_x1"></span>
</td>
<td>y2: <span id="variavel_y1"></span>
</td>
</tr>
<tr>
<td>
<input type="range" style="width: 180px;" name="x1" id="valorX1" min="0" max="375" oninput="altera(this.value,this.name)">
</td>
<td>
<input type="range" style="width: 180px;" name="y1" id="valorY1" min="0" max="500" oninput="altera(this.value,this.name)">
</td>
</tr>
</table>
<canvas id="myCanvas" width="375" height="500"></canvas>