Gezeichnete Linien ändern Farbe (canvas)?

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

znieh99

Grünschnabel
Hallo Forum,
ich habe ein seltsames Problem mit JS und Canvas. Ich zeichne mehrere Linien nacheinander in verschiedenen Farben. Jedoch bekommen alle bisher gezeichneten Linien die Farbe der zuletzt gezeichneten Linie. Was mache ich falsch?
Javascript:
function start() {
    var colBright = ["hsl(240, 100%, 75%)", "hsl(320, 100%, 75%)",
        "hsl(0, 100%, 75%)", "hsl(60, 100%, 75%)", "hsl(120, 100%, 75%)",
        "hsl(180, 100%, 75%)"];
        
    let cObj = document.getElementById("canvas");
    canv = cObj.getContext('2d');
        // hole aktuellen Farbindex
    let counter = document.getElementById("my_id").value;
    counter = parseInt(counter);
    canv.lineWidth="11";
    canv.strokeStyle= colBright[counter];   //setze Farbe
    let posX = counter + 1;
    canv.moveTo((posX) * 20, 50);           //Startpunkt
    canv.lineTo((posX) * 20, 200);          //Endpunkt der Linie
    canv.stroke();                          // Zeichne Linie
    document.getElementById("my_id").value = posX;  //setze nächsten Farbindex
}
HTML:
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="js/meinscript.js" ></script>
    </head>
    <body>
        <div id="Window">
            <input id='my_id' value="0"><br>
            <canvas id="canvas" width="380" height="330" style="border:1px solid #000000;"></canvas>
        </div>
        <button type="button" onclick="start()">Try it</button>
    </body>
</html>
 

Sempervivum

Erfahrenes Mitglied
Das hängt damit zusammen, dass sich das Zeichnen deiner Linien immer im selben Pfad abspielt, daher wirkt das stroke immer auf alle Elemente des Pfades, d. h. auf alle Linien.
Du kannst das sehr leicht beheben, indem Du vor jedem Zeichnen einen neuen Pfad beginnst:
CanvasRenderingContext2D.beginPath() - Web APIs | MDN
Code:
            canv.beginPath();
            canv.moveTo((posX) * 20, 50); //Startpunkt
            canv.lineTo((posX) * 20, 200); //Endpunkt der Linie
            canv.stroke(); // Zeichne Linie
 

znieh99

Grünschnabel
Das hängt damit zusammen, dass sich das Zeichnen deiner Linien immer im selben Pfad abspielt, daher wirkt das stroke immer auf alle Elemente des Pfades, d. h. auf alle Linien.
Du kannst das sehr leicht beheben, indem Du vor jedem Zeichnen einen neuen Pfad beginnst:
CanvasRenderingContext2D.beginPath() - Web APIs | MDN
Code:
            canv.beginPath();
            canv.moveTo((posX) * 20, 50); //Startpunkt
            canv.lineTo((posX) * 20, 200); //Endpunkt der Linie
            canv.stroke(); // Zeichne Linie
Danke! Das war ja einfach.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…