Flags with Stars

<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}`);

1) Vietnam

Input

function star(ctx) { ctx.beginPath(); [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41], [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16] ].forEach((xy) => ctx.lineTo(xy[0],xy[1])); ctx.fill(); } function drawFlag(ctx) { ctx.fillStyle = 'red'; ctx.translate(50,50); star(ctx); }

xxxxxxxxxx

 

1

function star(ctx)

2

{

3

  ctx.beginPath();

4

  [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],

5

    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]

6

  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));

7

  ctx.fill();

8

}

9

​

10

function drawFlag(ctx)

11

{

12

  ctx.fillStyle = 'red';

13

  ctx.translate(50,50);

14

  star(ctx);

15

}

16

​

Go reset

Output

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.translate(50,50);
  star(ctx);
}

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,200,150);
  ctx.translate(100,75);
  ctx.fillStyle='yellow';
  star(ctx);
}

2) Panama

Input

function star(ctx) { ctx.beginPath(); [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20], [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8] ].forEach((xy) => ctx.lineTo(xy[0],xy[1])); ctx.fill(); } function drawFlag(ctx) { }

xxxxxxxxxx

 

1

function star(ctx)

2

{

3

  ctx.beginPath();

4

  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],

5

    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]

6

  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));

7

  ctx.fill();

8

}

9

function drawFlag(ctx)

10

{

11

}

12

​

Go reset

Output

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
function drawFlag(ctx)
{
}

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,160);
  ctx.fillStyle = 'red';
  ctx.fillRect(120,0,120,80);
  ctx.translate(180,120);
  star(ctx);
  ctx.translate(-180,-120);
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,80,120,80);
  ctx.translate(60,40);
  star(ctx);
}

3) Bosnia and Herzegovina

Input

function drawFlag(ctx) { }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

}

4

​

Go reset

Output

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
}

4) Democratic Republic of Congo (formerly Zaire)

Input

function drawFlag(ctx) { }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

}

4

​

Go reset

Output

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
}