Easy Flags

<canvas id='usr' width=150 height=100></canvas>
<canvas id='ans' width=150 height=100></canvas>

drawFlag(document.getElementById('usr').getContext('2d'));
(()=>{
  --snippet-ans--
  drawFlag(document.getElementById('usr').getContext('2d'));
})();

1) Libya

The flag of Libya, until 2011, was a simple green rectangle.

Try the program as it is given, then change it so that the green rectangle is 150 wide.

Input

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

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

  ctx.fillStyle = 'green';

4

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

5

}  

6

​

Go reset

Output

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

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

2) France

The flag of France is blue, white and red. The code given draws only one of the three rectangles required and it is in the wrong place.

Input

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

xxxxxxxxxx

 

1

function drawFlag(ctx)

2

{

3

  ctx.fillStyle = 'blue';

4

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

5

}

6

​

Go reset

Output

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

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