I used a for loop to draw different curves. But how can I change every line to a different color?

Question

In my draw function I draw everything. I draw the white rect because you can change the position of every curve and otherwise you will see all of them. Not just the one with your new position.

function draw() {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight); 

    for (var i = 0; i <= line.length; i++) {    

            // Directly under this line of text stands my color for the 
            // curves and that is what needs to be corrected I guess.
            ctx.strokeStyle = "rgb(200,200,200)";
            ctx.beginPath();
            ctx.moveTo(500, 150);
            ctx.bezierCurveTo(line[i], 300, line[i], 300, line[i], 400 + (i * 15));
            ctx.stroke();
            ctx.closePath();

        console.log[i];
    }
}

The function below gets the values of my from out my html so it can draw the correct curves

function create(){
    console.log("change line");
    var form = document.getElementById("frm1");

    for(var i = 0; i < form.length; i++){
        line[i] = form[i].value;
    }

    console.log(line);
    draw();
}

do you need specific colours or can you use random colors? – Lelio Faieta May 14 '15 at 15:05 — Lelio Faieta, May 14 '15 at 15:05
random if it is possible – tibo goethals May 14 '15 at 15:06 — tibo goethals, May 14 '15 at 15:06

score 0 · Accepted Answer · answered May 14 '15 at 15:11

0

you can use a function like this:

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

to retrieve a random number between 0 and 255 for each value of R,G and B (red green and blue). So I'd write your code as

red = getRandomInt(0,255);
green = getRandomInt(0,255);
blue = getRandomInt(0,255);
ctx.strokeStyle = "rgb("+red+","+green+","+blue+")";

hope it helps!

answered May 14 '15 at 15:11

Lelio Faieta

6,457
7
40
74

@tibogoethals you are welcome. Please close the answer as solved in this case! – Lelio Faieta May 14 '15 at 15:15

I used a for loop to draw different curves. But how can I change every line to a different color?

1 Answers1