Flags with Methods

1) Three colours

Several countries have flags that contain three colors in vertical stripes.

Three colour flags

Draw the flags of:

• France
• Romania
• Belgium
• Nigeria
• Sizes are:
  • The small flags are 75 by 50
  • The margins are 10

Input

function drawFlag(ctx){ }

xxxxxxxxxx

 

1

function drawFlag(ctx){

2

}

3

​

Go reset

Output

function drawFlag(ctx){
}

function drawFlag(ctx){
  function tri(x,y,cl){
    ctx.translate(x,y);
    cl.forEach((c,i)=>{
      ctx.fillStyle = c;
      ctx.fillRect(i*75/cl.length,0,75/cl.length,50);
    });
    ctx.translate(-x,-y);
  }
  ctx.fillStyle = 'gray';
  tri(10,10,['red','white','blue']);
  tri(95,10,['red','yellow','blue']);
  tri(10,70,['black','yellow','red']);
  tri(95,70,['green','white','green']);
}

2) Nordic cross

Several countries have flags that contain three colors in vertical stripes.

Nordic

The Nordic Cross features in flags of Scandinavia

Draw the flags of: Sweden, Denmark, Finland, Östergötland

• The small flags are 75 by 50.
• The squares on the left are 20 by 20.
• The line width is 10.

Input

function drawFlag(ctx){ }

xxxxxxxxxx

 

1

function drawFlag(ctx){

2

}

3

​

Go reset

Output

function drawFlag(ctx){
}

function drawFlag(ctx){
  function nordic(x,y,b,f){
    ctx.translate(x,y);
    ctx.fillStyle = b;
    ctx.fillRect(0,0,75,50);
    ctx.fillStyle = f;
    ctx.fillRect(20,0,10,50);
    ctx.fillRect(0,20,75,10);
    ctx.translate(-x,-y);
  }
  nordic(10,10,'blue','yellow');
  nordic(95,10,'red','white');
  nordic(10,70,'white','blue');
  nordic(95,70,'yellow','blue');
}

3) Horizontal stripes

Several countries have flags that contain three colors in vertical stripes.

Nordic

The Nordic Cross features in flags of Scandinavia

Draw the flags of: Sweden, Denmark, Finland, Östergötland

• The small flags are 75 by 50.
• The squares on the left are 20 by 20.
• The line width is 10.

Input

function drawFlag(ctx){ }

xxxxxxxxxx

 

1

function drawFlag(ctx){

2

}

3

​

Go reset

Output

function drawFlag(ctx){
}

function drawFlag(ctx){
  let w = 75;
  let h = 50;
  function stripes(x,y,cl){
    ctx.translate(x,y);
    ctx.fillStyle = b;
    ctx.fillRect(0,0,75,50);
    ctx.fillStyle = f;
    ctx.fillRect(20,0,10,50);
    ctx.fillRect(0,20,75,10);
    ctx.translate(-x,-y);
  }
}