Line drawn on html canvas not staying

Question

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>

score 0 · Answer 1 · answered Jul 19 '22 at 02:36

0

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.

answered Jul 19 '22 at 02:36

Zsargul

39
5

1

That was really helpful! Thank you so much! Can I ask why does this solve the problem tho? – eventu Jul 19 '22 at 13:21
Normally, a HTML form refreshes a web page when it is finished submitting. When the function `drawLine()` is called and finished executing, it has no explicit return value and therefore returns `undefined`. By specifying `return false`, the false value "interrupts" the form submission and prevents it from refreshing the page. This is a quick but slightly 'hacky' way to get around the page refresh. A more elegant solution can be done using jQuery or `event.preventDefault()`, like in [this post](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) – Zsargul Jul 20 '22 at 00:02

Line drawn on html canvas not staying

1 Answers1