Flags with Polygons

<div style='background:silver;padding:5px'>
<canvas id='usr' width=--snippet-w-- height=--snippet-h--></canvas>
<canvas id='ans' width=--snippet-w-- height=--snippet-h-- style='display:none'></canvas>
</div>

--snippet-usr--
drawFlag(document.getElementById('usr').getContext('2d'));
(()=>{
  --snippet-ans--
  drawFlag(document.getElementById('ans').getContext('2d'));
})();
let [a,b] = ['usr','ans']
    .map(id=>document.getElementById(id))
    .map(elem=>elem.getContext('2d').getImageData(0,0,elem.width,elem.height))
let diff = a.data.map((v,i) => v===b.data[i]?1:0).reduce((acc,v)=>acc+v,0)*100/a.data.length;
let fb = document.createElement('div');
fb.innerText = `Score: ${diff.toFixed(1)}`;
document.body.appendChild(fb);
fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);

Napier

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.moveTo(0,0);
  ctx.lineTo(150,0);
  ctx.lineTo(150,150);
  ctx.fill();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,150,150);
  ctx.moveTo(0,0);
  ctx.lineTo(150,150);
  ctx.lineTo(0,150);
  ctx.fillStyle = "red";
  ctx.fill();
}

The Bahamas

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'rgb(127,192,255)';
  ctx.fillRect(0,0,300,150);
  ctx.fillStyle = 'rgb(255,255,0)';
  ctx.fillRect(0,50,300,50);
  ctx.fillStyle = 'black';
  ctx.moveTo(0,0);
  ctx.lineTo(112,75);
  ctx.lineTo(0,150);
  ctx.fill();
}

Jamaica

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
}

Seychelles

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
}