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

The flag of Vietnam has a yellow five pointed star on a red background. This star is a popular device on many flags, we define the star once and use it many times in later flags.

The given star has a radius of 50, it is centred on 0,0 which is the wrong place. We must translate to put it in the right place. We can use the translate method to move the star to the right location.

The translate call is to the wrong location (50,50) - it should be at (100,75).

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

These stars have a radius of 25.

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

The flag of Bosnia and Herzegovina includes 9 white stars. Each star is 38 right and 38 below the previous star.

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='blue';
  ctx.fillRect(0,0,600,304);
  ctx.fillStyle='yellow';
  ctx.moveTo(160,0);
  ctx.lineTo(464,0);
  ctx.lineTo(464,304);
  ctx.fill();
  ctx.fillStyle='white';
  ctx.translate(105,0);
  for(let i=0;i<9;i++){
    star(ctx);
    ctx.translate(38,38);
  }
}

Before attempting the Congolese flag you might want to look at how Flag of Samoa can be drawn.

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)
{
}