Change color of canvas element

Question

I am trying to change the color of line drawn on canvas dynamically...

ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = \"Grey\"

It coul

Answer 1

I was having the same problem, I did it by moving another line with another color of different canvas element, so it gives appearance of line changing its color dynamically.

function drawGreyLine() {
    ctx1.clearRect(0, 0, WIDTH, HEIGHT);
    ctx1.strokeStyle = "Grey"; // line color
    ctx1.moveTo(0, 0);
    ctx1.moveTo(0, 200);
    ctx1.lineTo(200, 200);
}

function drawColorLine() {
    x += dx;

    if (x <= 200) {
        ctx2.beginPath();
        ctx2.lineWidth = 5;
        ctx2.lineCap = "round";
        ctx2.strokeStyle = "sienna"; // line color
        ctx2.moveTo(0, 200);
        ctx2.lineTo(x, 200);
        ctx2.moveTo(200, 200);
        ctx2.stroke();
    }
}

Hope this solves your problem.... :)