| 
				 | 
				
| Line 22: | 
Line 22: | 
 |    ctx.fillRect(0,0,150,100);  |  |    ctx.fillRect(0,0,150,100);  | 
 | }     |  | }     | 
 | </pre>
  |  | 
 | </div>
  |  | 
 | 
  |  | 
 | ==France==
  |  | 
 | <div class=qu data-width="150" data-height="100">
  |  | 
 | 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.<br/>
  |  | 
 | [[Image:flag_guide_france.png|border]]
  |  | 
 | <pre class=usr>
  |  | 
 | function drawFlag(ctx)
  |  | 
 | {
  |  | 
 |   ctx.fillStyle = 'blue';
  |  | 
 |   ctx.fillRect(50,0,50,100);
  |  | 
 | }
  |  | 
 | </pre>
  |  | 
 | <pre class=ans>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); 
  |  | 
 | }
  |  | 
 | 
  |  | 
 | </pre>
  |  | 
 | </div>
  |  | 
 | 
  |  | 
 | ==Germany==
  |  | 
 | <div class=qu data-width=150 data-height=90>
  |  | 
 | The flag of Germany is black, red and yellow.
  |  | 
 | 
  |  | 
 | Only one of the three rectangles has been drawn - and that one is in the wrong place.<br/>
  |  | 
 | [[Image:flaggermany.png|border]] <pre class=usr>
  |  | 
 | function drawFlag(ctx)
  |  | 
 | {
  |  | 
 |   ctx.fillStyle = 'yellow';
  |  | 
 |   ctx.fillRect(0,0,150,30);
  |  | 
 | } 
  |  | 
 | </pre>
  |  | 
 | <pre class=ans>
  |  | 
 | function drawFlag(ctx)
  |  | 
 | {
  |  | 
 |   ctx.fillStyle = 'black';
  |  | 
 |   ctx.fillRect(0,0,150,30);
  |  | 
 |   ctx.fillStyle = 'red';
  |  | 
 |   ctx.fillRect(0,30,150,30);
  |  | 
 |   ctx.fillStyle = 'yellow';
  |  | 
 |   ctx.fillRect(0,60,150,30);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | </pre>
  |  | 
 | </div>
  |  | 
 | 
  |  | 
 | ==Switzerland==
  |  | 
 | <div class=qu width='100' height='100'
  |  | 
 |   className="Raster" level='1'>
  |  | 
 | The flag of Switzerland is red with a white cross in the center.
  |  | 
 | 
  |  | 
 | The background has been filled in. Use white rectangles to draw the cross.<br/>
  |  | 
 | [[Image:swissflag.png|border]] <pre class=usr>function drawFlag(ctx)
  |  | 
 | {
  |  | 
 |   ctx.fillStyle = 'red';
  |  | 
 |   ctx.fillRect(0,0,100,100);
  |  | 
 | }
  |  | 
 | </pre>
  |  | 
 | <pre class=ans>
  |  | 
 | function drawFlag(ctx)
  |  | 
 | {
  |  | 
 |   ctx.fillStyle = 'red';
  |  | 
 |   ctx.fillRect(0,0,100,100);
  |  | 
 |   ctx.fillStyle = 'white';
  |  | 
 |   ctx.fillRect(10,40,80,20);
  |  | 
 |   ctx.fillRect(40,10,20,80);
  |  | 
 | }
  |  | 
 | </pre></div>
  |  | 
 | 
  |  | 
 | ==United Arab Emirates==
  |  | 
 | <div class=qu data-width='200' data-height='99'>
  |  | 
 | *The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
  |  | 
 | *The rectangle is 200 by 99.
  |  | 
 | [[Image:Flaguaeplain.png|border]]
  |  | 
 | <div class='dhint' title="How to draw a circle">
  |  | 
 | </div>
  |  | 
 | <pre class=usr>
  |  | 
 | function drawFlag(ctx)
  |  | 
 | {
  |  | 
 |   ctx.fillStyle = 'white';
  |  | 
 |   ctx.fillRect(50,0,150,33);
  |  | 
 |   ctx.fillStyle = 'red';
  |  | 
 | }
  |  | 
 | </pre>
  |  | 
 | <pre class=ans>
  |  | 
 | function drawFlag(ctx)
  |  | 
 | {
  |  | 
 |   ctx.fillStyle = 'red';
  |  | 
 |   ctx.fillRect(0,0,50,99);
  |  | 
 |   ctx.fillStyle = 'black';
  |  | 
 |   ctx.fillRect(50,0,150,33);
  |  | 
 |   ctx.fillStyle = 'white';
  |  | 
 |   ctx.fillRect(50,33,150,33);
  |  | 
 |   ctx.fillStyle = 'green';
  |  | 
 |   ctx.fillRect(50,66,150,33);
  |  | 
 | }
  |  | 
 | </pre>  |  | </pre>  | 
 | </div>  |  | </div>  | 
Benin
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.
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,75,100);
}  
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,150,100);
}