Flags: Worked Examples

Video from Panopto:

• Benin Walk-through

1) Benin

{{#ev:youtube|JsZafc6Y7xQ}}

• The flag is 150 by 100
• The green rectangle is 50 by 100
• The yellow and red rectangles are 100 by 50

Flag of Benin

Input

function drawFlag(ctx) { ctx.fillStyle = 'green'; ctx.fillRect(0,0,50,100); ctx.fillStyle = 'yellow'; ctx.fillRect(50,0,100,50); ctx.fillStyle = 'red'; ctx.fillRect(50,50,100,50); }

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

  ctx.fillStyle = 'green';

4

  ctx.fillRect(0,0,50,100);

5

  ctx.fillStyle = 'yellow';

6

  ctx.fillRect(50,0,100,50);

7

  ctx.fillStyle = 'red';

8

  ctx.fillRect(50,50,100,50);

9

}  

10

​

Go reset

Output

function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}  

function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}