Q:

Javascript, drawing a tringle, canvas

I've asked similar question and some good souls tried to help but unfortunately failed. 
I was given an assignment by my teacher; I am to collect data from a html form and then print a tringle using the given coordinates. Unfortunately my code is not working and I don't know where the mistake is. Any ideas? It's my first JS program btw so please excuse my imperfection.
Here's the code:
    https://jsfiddle.net/n07engyt/4/
    function draw() 
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wierzcholekX1')
        var canvas = document.getElementById("canvas1");
        var ctx = canvas.getContext("2d"); 
        ctx.beginPath();
        //ctx.moveTo(100,50);
        ctx.moveTo(testX1(), testY1());
        //ctx.lineTo(130, 100);
        ctx.lineTo(testX2(), testY2());
        ctx.lineTo(testX3(), testY3());
        //ctx.lineTo(70, 100);
        ctx.fillStyle = "rgba(0,0,0,1)";
        ctx.fill();
    }

    function testX1()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wX1')
        return coordinate.value;
    }

    function testX2()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wX2')
        return coordinate.value;
    }

    function testX3())
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wX3')
        return coordinate.value;
    }

    function testY1()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wY1')
        return coordinate.value;
    }

    function testY2()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wY2')
        return coordinate.value;
    }

    function testY3()
    {
        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wY3')
        return coordinate.value;
    }

    function write_coordinate(){
        draw();
    }

I have one more question; is there any better way to do it? Like more elegant not by using separated function for each vertex?

A:

Using one function to get all the points in an object would be better. If you use forms, you don't have to write document.getElement.. etc. Here is an example, i believe this would be a neat solution

function getCoordinates() {
  return{
    x1:Number(cordinates.x1.value),
    y1:Number(cordinates.y1.value),
    x2:Number(cordinates.x2.value),
    y2:Number(cordinates.y2.value),
    x3:Number(cordinates.x3.value),
    y3:Number(cordinates.y3.value)
  }
}

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var p = getCoordinates();
    ctx.fillStyle="#A2322E";
    console.log(p)
    ctx.beginPath();
    
    ctx.moveTo(p["x1"],p["y1"]);
    ctx.lineTo(p["x2"],p["y2"]);
    ctx.lineTo(p["x3"],p["y3"]);
    ctx.closePath();

    ctx.fill();
  }
}
#canvas{
  border:2px solid #666;
}
<form name="cordinates">
  <div>
    <input name="x1" type=text placeholder="x1" value="70">
    <input name="y1" type=text placeholder="y1" value="50">
  </div>
  <div>
    <input name="x2" type=text placeholder="x2" value="100">
    <input name="y2" type=text placeholder="y2" value="75">
  </div>
  <div>
    <input name="x3" type=text placeholder="x3" value="100">
    <input name="y3" type=text placeholder="y3" value="25">
  </div>
</form>
<button onclick="draw()">draw</button><br/>
<canvas id="canvas" width="400" height="400"></canvas>

