CODEWITHSUNDEEP
javascriptcanvasbezier
user3667156
user3667156

Reputation: 3

draw a bezier curve but the canvas stays blank

Here's my code. I'm new to JavaScript so I'm having trouble finding what's wrong with my code. I tried adding alerts to various parts of the function to check which parts work without much success.

<!DOCTYPE html>
<html>
<head>
<script>
function BEZIER() {
    var X = ["0,0,0,0,0"];
    var Y = ["0,0,0,0,0"];
    X[0] = document.getElementById("X0");
    Y[0] = document.getElementById("Y0");
    X[0] = document.getElementById("X1");
    Y[0] = document.getElementById("Y1");
    X[0] = document.getElementById("X2");
    Y[0] = document.getElementById("Y2");
    X[0] = document.getElementById("X3");
    Y[0] = document.getElementById("Y3");
    X[0] = document.getElementById("X4");
    Y[0] = document.getElementById("Y4");
    var A;
    var B;
    var T = 0;
    while (T <= 1) {
        var i = 0;
        while (i < 5) {
            A[i] = X[i];
            B[i] = Y[i];
            i++;
        }
        i = 0;
        var j = 5;
        while (j > 1) {
            i = 0;
            while (i < j) {
                A[i] = A[i] * (1 - T) + A[i + 1] * T;
                B[i] = B[i] * (1 - T) + B[i + 1] * T;
                i++;
            }
            j--;
        }
        T = T + 0.1;
        var S = document.getElementById("a");
        var ctx = S.getContext("2d");
        ctx.beginPath();
        ctx.arc(A[0], B[0], 10, 0, 2 * Math.PI);
        ctx.fill();
    }
}
</script>
</head>
<body>
    <p>Introduceti coordonatele cu valori intre 0 si 800</p> <br>
    <form>punctul 0: X=<input type="number" id="X0" name="X0" >, Y=<input type="number" id="Y0" name="Y0" ><br></form>  
    <form>punctul 1: X=<input type="number" id="X1" name="X1" >, Y=<input type="number" id="Y1" name="Y1" ><br></form>
    <form>punctul 2: X=<input type="number" id="X2" name="X2" >, Y=<input type="number" id="Y2" name="Y2" ><br></form>
    <form>punctul 3: X=<input type="number" id="X3" name="X3" >, Y=<input type="number" id="Y3" name="Y3" ><br></form>
    <form>punctul 4: X=<input type="number" id="X4" name="X4" >, Y=<input type="number" id="Y4" name="Y4" ><br></form>   
    <button onclick="BEZIER()">!DESENATI!</button><br><br>
     <canvas id="a" width="800" height="800" style="border:1px solid #000000;">
    </canvas>

</body>

Upvotes: 0

Views: 102

Answers (1)

Maxim Bernard
Maxim Bernard

Reputation: 307

There are many syntax errors in your code, that's why it doesn't do anything.

First, in your loop, you are using variables A and B, but without initializing them. Try var A = []; var B = [];

Also, if you want to get the value of your input tags, you have to do

document.getElementById("X0").value

instead of

document.getElementById("X0")

But what's really weird is that you're always assigning a new value to the same elements of X and Y :

X[0] = ...something...
X[0] = ...something else...

Also, when you create your X and Y arrays, you are actually just creating arrays with a single string as an element... try this instead :

var X = [0,0,0,0,0];
var Y = [0,0,0,0,0]; // without the "

But as someone already said, I suggest you read more about the syntax of Javascript before attempting to code something that is much too hard for you. Start with the basics, as everybody does when they start programming in a new language...

Upvotes: 1

Related Questions