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

In these exercises you can use a function star which draws a five pointed star on the canvas.

You can control the position of the star by calling the transform method of ctx.

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).

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

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

Myanmar

function drawFlag(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)
{
}

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

Panama

These stars have a radius of 25.

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

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

Bosnia and Herzegovina

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

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

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

Democratic Republic of Congo (formerly Zaire)

• The large star has a radius of 100
• The 6 smaller stars have a radius of 10.
• The background color is rgb: 173,216,230
• You can use scale to draw smaller stars

The are the points of a star radius 100:

 [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'rgb(173,216,230)';
  ctx.fillRect(0,0,500,300);
  ctx.fillStyle = 'yellow';
  ctx.translate(250,150);
  star(ctx);
  ctx.translate(-250,-150);
  ctx.translate(50,25);
  ctx.scale(0.1,0.1);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
}

function star(ctx){
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach(xy=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}