Flags with Polygons

You can dive into the code, or you can watch these worked examples Flags of Russia

1) Napier

Napier University

Input

function drawFlag(ctx) { ctx.fillStyle = 'white'; ctx.fillRect(0,0,150,150); ctx.fillStyle = 'red'; ctx.moveTo(0,0); ctx.lineTo(150,0); ctx.lineTo(150,150); ctx.fill(); }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

  ctx.fillStyle = 'white';

4

  ctx.fillRect(0,0,150,150);

5

  ctx.fillStyle = 'red';

6

  ctx.moveTo(0,0);

7

  ctx.lineTo(150,0);

8

  ctx.lineTo(150,150);

9

  ctx.fill();

10

}

11

​

Go reset

Output

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = 'red';
  ctx.moveTo(0,0);
  ctx.lineTo(150,0);
  ctx.lineTo(150,150);
  ctx.fill();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,150,150);
  ctx.moveTo(0,0);
  ctx.lineTo(150,150);
  ctx.lineTo(0,150);
  ctx.fillStyle = "red";
  ctx.fill();
}

2) The Czech Republic

• 300 by 200
• The point of intersection is the centre of the rectangle

Flag of Czech Republic

Input

function drawFlag(ctx) { }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

}

4

​

Go reset

Output

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
  ctx.moveTo(0,0);
  ctx.lineTo(150,100);
  ctx.lineTo(0,200);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'white';
  ctx.moveTo(0,0);
  ctx.lineTo(150,100);
  ctx.lineTo(300,100);
  ctx.lineTo(300,0);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'red';
  ctx.moveTo(0,200);
  ctx.lineTo(150,100);
  ctx.lineTo(300,100);
  ctx.lineTo(300,200);
  ctx.fill();  
}

3) The Bahamas

Flag Bahamas

Input

function drawFlag(ctx) { }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

}

4

​

Go reset

Output

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'rgb(127,192,255)';
  ctx.fillRect(0,0,300,150);
  ctx.fillStyle = 'rgb(255,255,0)';
  ctx.fillRect(0,50,300,50);
  ctx.fillStyle = 'black';
  ctx.moveTo(0,0);
  ctx.lineTo(112,75);
  ctx.lineTo(0,150);
  ctx.fill();
}

4) Jamaica

Flag of Jamaica

Input

function drawFlag(ctx) { ctx.fillStyle = 'yellow'; ctx.fillRect(0,0,300,150); }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

  ctx.fillStyle = 'yellow';

4

  ctx.fillRect(0,0,300,150);

5

}

6

​

Go reset

Output

function drawFlag(ctx)
{
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,0,300,150);
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,0,300,150);
  ctx.fillStyle = 'green';
  ctx.moveTo(30,0);
  ctx.lineTo(150,60);
  ctx.lineTo(270,0);
  ctx.fill();
  ctx.moveTo(30,150);
  ctx.lineTo(150,90);
  ctx.lineTo(270,150);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'black';
  ctx.moveTo(0,15);
  ctx.lineTo(120,75);
  ctx.lineTo(0,135);
  ctx.fill();
  ctx.moveTo(300,15);
  ctx.lineTo(180,75);
  ctx.lineTo(300,135);
  ctx.fill();
}

5) Seychelles

Flag of Seychelles

Input

function drawFlag(ctx) { }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

}

4

​

Go reset

Output

function drawFlag(ctx)
{
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
  ctx.moveTo(0,150);
  ctx.lineTo(0,0);
  ctx.lineTo(100,0);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'yellow';
  ctx.moveTo(0,150);
  ctx.lineTo(100,0);
  ctx.lineTo(200,0);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'red';
  ctx.moveTo(0,150);
  ctx.lineTo(200,0);
  ctx.lineTo(300,0);
  ctx.lineTo(300,50);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'white';
  ctx.moveTo(0,150);
  ctx.lineTo(300,50);
  ctx.lineTo(300,100);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'green';
  ctx.moveTo(0,150);
  ctx.lineTo(300,150);
  ctx.lineTo(300,100);
  ctx.fill();
}