I am coding a script where the user enters the coordinates and the program draws a line on a canvas, but after using the onsubmit() function, I can't get the line to stay on the canvas and it says 'The file you asked for does not exist' when I put it into W3schools one. Whats wrong with my code?
<form onsubmit="drawLine()" autocomplete="on" style="
Starting Coordinate: <input type= "number" id="x_coor" name="x_coor"
min= "-12" max="12" placeholder="x"
step= "0.01"> ,
<input type= "number" id="y_coor" name="y_coor"
min= "-15" max="15" placeholder="y">
<br>
Rate of Change: <input type= "number" id="rise" name="neum_roc" placeholder="rise"> /
<input type= "number" id="run" name="denom_roc" placeholder="run">
<br>
<input type= "submit" name="run"> <input type= "reset" name="reset" >
<hr>
</form>
<div style = "text-align:center;">
<canvas id="Cartesian_Graph" height="1000" width="1000",
style="border: 10px solid #000000;
background-image: url('https://papik.pro/en/uploads/posts/2022-06/1655841218_5-papik-pro-p-cool-drawings-on-the-coordinate-plane-5.png');
background-position: center;
background-size: 1160px 1160px;">
<!--the image is added as a background to not interfere with the line that needs to be drawn on top of image-->
Your browser does not support canvas.
</canvas>
</div>
<script>
var canvas = document.getElementById('Cartesian_Graph');
var ctx = canvas.getContext('2d');
ctx.beginPath();
function drawLine() {
ctx.lineWidth = 5
ctx.moveTo(0,0);
ctx.lineTo(1175,1175);
ctx.stroke();
}
</script>
I changed your javascript code so that the drawLine() function would return false. This did the trick and stopped the canvas line from disappearing.
In your javascript code, I simply added return false to the end of the function:
var canvas = document.getElementById('Cartesian_Graph');
var ctx = canvas.getContext('2d');
ctx.beginPath();
function drawLine() {
ctx.lineWidth = 5
ctx.moveTo(0,0);
ctx.lineTo(1175,1175);
ctx.stroke();
return false;
}
and in your form element, I changed:
<form onsubmit="drawLine()" autocomplete="on" style="">
to
<form onsubmit="return drawLine();" autocomplete="on" style="">
Hope this helps.