I've got some issues with closePath() in Javascript

Question

I must be to pull a horizontal red and a vertical green line in the middle. I can do it separately for each, but together both lines will be green. Can anyone tell me why?

var c= document.getElementById('myCanvas').getContext('2d');

//c.fillRect(20,10,250,175);//

var cw= 450;
var ch= 300;

c.moveTo(0,(ch/2));
c.lineTo(450,(ch/2));
c.strokeStyle= '#db0000';
c.stroke();



c.moveTo((cw/2),0);
c.lineTo((cw/2),cw);
c.closePath();
c.strokeStyle= '#3ac214';
c.stroke();

Answer 1

You should be using the beginPath() method in order to get the colors right. The beginPath() method begins a path, or resets the current path.

Here is the working DEMO: https://jsfiddle.net/f0khrmer/

Check updated code here:

function drawCanvas(){
    var c= document.getElementById('myCanvas').getContext('2d');

    var cw= 450;
    var ch= 300;

    c.beginPath();
    c.moveTo(0,(ch/2));
    c.lineTo(450,(ch/2));
    c.strokeStyle= '#db0000';
    c.stroke();


    c.beginPath();
    c.moveTo((cw/2),0);
    c.lineTo((cw/2),cw);
    c.closePath();
    c.strokeStyle= '#3ac214';
    c.stroke();
}

Hope this helps!