Different strokes styles, in different lines

Question

Need several lines but with different styles. However all are in the same style. Thanks.

<script>
     (function draw_b() {


           var canvas = document.getElementById("cena3_pontos");
           var context = canvas.getContext("2d");

            //points
             context.fillStyle = "#ff0000"; //2 e 6 
             context.fillRect(72,95,2,2);
             context.fillRect(97,56,2,2);
             context.fillRect(120,17,2,2);


            /* 

            Diagonal line,represents points on grahic 

             */
             context.beginPath();
             context.moveTo(130,5); //  diagonal
             context.lineTo(-50,300);// 

            /*

            line dashs intersects diagonal line 

            */
            context.setLineDash([5,2])
            context.strokeStyle = "#ffffff";

            /*

            line width

            */
            context.lineWidth = 1;
            context.moveTo(50, 97); 


            //line dash //
            context.lineTo(70,97);
            context.moveTo(75, 95); 
            context.lineTo(75, 140);

            context.closePath();
            context.stroke();

        }())
</script>

Answer 1

Everything between context.beginPath and context.fill or context.stroke will take on the very last styling that was defined.

For example if you beginPath, define 10 fillStyles and then do fill, all your fills will be the 10th fillStyle.

Solution: Start each unique styling with beginPath.