Flags with Stars

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.

The function call start(ctx) will fill a star of radius 50 centred (0,0).

• You can use the call ctx.translate(100,75) to move the star to the right place
• You can use the call ctx.scale(0.5,0.5) to make the star the right size

Documentation: translate scale

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.translate(50,50);
  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();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,200,150);
  ctx.translate(100,75);
  ctx.fillStyle='yellow';
  ctx.scale(0.5,0.5);
  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();
}

Myanmar

• 180 by 120
• The centre of the star is (90,64)
• The radius is of the star is 44
• Colours are rgb(255,218,35) rgb(69,182,83) rgb(239,80,73) and white

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

function drawFlag(ctx)
{
  ctx.fillStyle = 'rgb(255,218,35)';
  ctx.fillRect(0,0,180,40);
  ctx.fillStyle = 'rgb(69,182,83)';
  ctx.fillRect(0,40,180,80);
  ctx.fillStyle = 'rgb(239,80,73)';
  ctx.fillRect(0,80,180,120);
  ctx.fillStyle = 'white';
  let r  = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
  ctx.translate(90,64);
  ctx.scale(0.44,0.44);
  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();
}

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);
  ctx.scale(0.25,0.25);
  star(ctx);
  ctx.scale(4,4);
  ctx.translate(-180,-120);
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,80,120,80);
  ctx.translate(60,40);
  ctx.scale(0.25,0.25);
  star(ctx);
  ctx.scale(4,4);
}

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

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