CODEWITHSUNDEEP
javascriptcanvashtml5-canvasdraw
filmguy27
filmguy27

Reputation: 1

Drawing a line in Canvas with user input

I'm trying to draw a line in Canvas when a user gives the X and Y coordinates. This is what I have so far. I can get the canvas and the input boxes it won't draw though. I'm a newbie so any advice is appreciated.

<script> 
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');


var x1 = document.getElementById("x1").value;
var x2 = document.getElementById("x2").value;
var y1 = document.getElementById("y1").value;
var y2 = document.getElementById("y2").value;


function draw(){
context.beginPath();
context.moveTo(x1.value,y1.value);
context.lineTo(x2.value,y2.value);
context.stroke();
}

</script>
<br><br>
<h1>Draw a Line</h1>

X-coordinate 1 <input type="text" id="start_x"><br><br>
Y-coordinate 1<input type="text" id="start_y"><br><br>
X-coordinate 2<input type="text" id="end_x"><br><br>
Y-coordinate 2<input type="text" id="end_y"><br><br>

<input type="button" value="draw" onclick="draw()">

Upvotes: 0

Views: 2612

Answers (3)

Rohit Kumar
Rohit Kumar

Reputation: 2031

your draw function is called onclick but the function uses the input value which was set as 'undefined' because when window loaded the value of the input was not defined, to resolve this you should include your code of getting those values in the draw function.

Upvotes: 0

Puni
Puni

Reputation: 1294

It's giving you undefined because you set your input id as start_x, start_y,end_x,end_y and in your js you are getting the value as x1,x2,y1,y2.

html

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<h1>Draw a Line</h1>
<form>
    X-coordinate 1 <input type="text" id="start_x"><br><br>
    Y-coordinate 1<input type="text" id="start_y"><br><br>
    X-coordinate 2<input type="text" id="end_x"><br><br>
    Y-coordinate 2<input type="text" id="end_y"><br><br>
    <input type="button" value="draw" onclick="draw()">
 </form>

js

 function draw(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x1 = document.getElementById("start_x").value;
        var x2 = document.getElementById("start_y").value;
        var y1 = document.getElementById("end_x").value;
        var y2 = document.getElementById("end_y").value;
        context.beginPath();
        context.moveTo(x1,x2);
        context.lineTo(y1,y2);
        context.stroke();
    }

Upvotes: 1

Omran Fadel
Omran Fadel

Reputation: 77

Rewrite your code this way;

<canvas width="300" height="300" id="myCanvas"></canvas><br /><br />
X-coordinate 1<input type="text" id="x1"><br><br>
Y-coordinate 1<input type="text" id="y1"><br><br>
X-coordinate 2<input type="text" id="x2"><br><br>
Y-coordinate 2<input type="text" id="y2"><br><br>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');    

function draw(){
    var x1 = document.getElementById("x1").value;
    var x2 = document.getElementById("x2").value;
    var y1 = document.getElementById("y1").value;
    var y2 = document.getElementById("y2").value;
    context.beginPath();
    context.strokeStyle="#FF0000";
    context.moveTo(x1,y1);
    context.lineTo(x2,y2);
    context.stroke();
}

</script>
<br><br>
<h1>Draw a Line</h1>

<input type="button" value="draw" onclick="draw()">

Upvotes: 0

Related Questions