Polygon Fill Rules in HTML

Shape Fill Rule
The HTML file:

<head>
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

 <link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>
<h1> Polygon Fill Rules in HTML</h1>
<p>
<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<p>

<script type="text/javascript">

"use strict"

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
    canvas.tabIndex = 0;

let fillRule = "nonzero";

let path1= [[300,100],[100,110],[100,300],[380,300],[380,260],[30,260],
            [30,280],[360,280], [360,290], [120,290],[120,120],[300,120]];

let path2 = [[20,380],[200,20],[330,380],[10,180],[380,180]];

let path = path1;

function Polygon(path){
    ctx.moveTo(path[0][0], path[0][1]);
    for(let i = 1; i < path.length; i++) {
        ctx.lineTo(path[i][0], path[i][1]);
    }
    ctx.lineTo(path[0][0], path[0][1]);
}

function DrawPolygon(path) {

    ctx.beginPath();

    ctx.fillStyle = "cyan";
    Polygon(path);
    ctx.fill(fillRule);

    ctx.strokeStyle="black";
    Polygon(path);
    ctx.stroke();
}

function DoPolygon(which) {
   ctx.clearRect(0,0,canvas.width, canvas.height);
   switch(which) {
      case "path1": path = path1; break;
      case "path2": path = path2; break;
      case "evenOdd": fillRule = "evenodd"; break;
      case "nonZero": fillRule = "nonzero"; break;
   }
   DrawPolygon(path);
}

DrawPolygon(path1);
</script>

<label for="shape">Shape</label>
<select id="shape" onchange="DoPolygon(this.value)">
   <option value="path1">Rectangle</option>
   <option value="path2">Star</option>
</select>

<label for="rule">Fill Rule</label>
<select id="rule" onchange="DoPolygon(this.value)">
   <option value="nonZero">nonzero</option>
   <option value="evenOdd">even odd</option>
</select>