JavaScript, form, canvas, draw triangle

Question

I'm new to JavaScript. It's an assignment given by my teacher and it's literally the first program I am to write in JS.

The task: I have to write a form, where I give coordinates of a triangle. Then I am to print the triangle with canvas. I'm trying to do it like this:

<!doctype html>


<head>

    <meta  charset  "UTF-8” />

    <title> JavaScript </title>

    <script type="application/javascript">
    window.onload = draw; 
    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(70, 100);
        ctx.fillStyle = "rgba(0,0,0,1)";
        ctx.fill();
        }

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

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

      /*  function write_coordinate()

    {

        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wierzcholekX1')
        welcome_parra.innerHTML = "welcome " + coordinate.value;

    }*/

    </script>

</head>

<body>
    <canvas id="canvas1" width="400" height="300"></canvas>

    <p id="form"></p>

    <form>
        <table>
            <tr>
                <td> Wierzcholek </td>
                <td> Współrzędna X</td>
                <td> Współrzędna Y </td>
            </tr>
            <tr>
                <td><label for="name">1</label></td>
                <td><input type="text" id="wierzcholekX1" /></td>
                <td><input type="text" id="wierzcholekY1"/></td>
            </tr>
            <tr>
                <td><label for="name">2</label></td>
                <td><input type="text" id="wierzcholekX2" /></td>
                <td><input type="text" id="wierzcholekY2"/></td>
            </tr>
            <tr>
                <td><label for="name">3</label></td>
                <td><input type="text" id="wierzcholekX3" /></td>
                <td><input type="text" id="wierzcholekY3"/></td>
            </tr>
        </table>
        <input type="button" value="wyślij" onclick="write_coordinate();"/>

        </form>

</body>

</html>

I wanted to create separated functions for each coordinate. I know it's not the best way, but as I mentioned, it's my first time. The problem is that when I try to do ctx.moveTo(testX1(),testY1()) nothing happens after I append the coordinates. Any ideas/suggestions?

Answer 1

https://jsfiddle.net/n07engyt/3/

function write_coordinate(){
    draw();
}

You messed up your functions a bit and never caller draw() accualy.

JavaScript, form, canvas, draw triangle

Question

1 answers

solution1
1 2016-04-05 22:30:15

JavaScript, form, canvas, draw triangle

Question

1 answers

solution1 1 2016-04-05 22:30:15

solution1
1 2016-04-05 22:30:15