var algorithm = "nonzero";

​

var cvs = document.getElementById('c');

cvs.width=400;

cvs.height=400;

​

var ctx = cvs.getContext("2d");

ctx.strokeStyle = "black";

ctx.fillStyle = "red";

​

function redraw() {

  ctx.clearRect(0,0,400,400);

  ctx.beginPath();

​

  ctx.moveTo(0,100);

  ctx.lineTo(200,400);

  ctx.lineTo(400,100);

  ctx.lineTo(0,100);

​

  ctx.moveTo(400,300);

  ctx.lineTo(200,0);

  ctx.lineTo(0,300);

  ctx.lineTo(400,300);

​

  ctx.stroke();

  ctx.fill(algorithm); // nonzero / evenodd

}

​

var btn = document.getElementById("b");

btn.addEventListener("click", function() {

  if(algorithm==="nonzero") {

    algorithm = "evenodd";

  } else { algorithm = "nonzero"; }

  btn.textContent = 'using "'+algorithm+'", click to flip';

  redraw();

});

​

btn.click();

​