Flags with Rectangles: Difference between revisions

From ProgZoo
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<pre id='shellbody' data-qtp='canvas'></pre>
<pre id='shellbody' data-qtp='canvas'></pre>
You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin|Flag of Benin]] [https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=40d77c01-abda-4333-805a-ad8800e8f121 Benin Video]
You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin|Flag of Benin]]  


==Libya==
==Libya==

Revision as of 17:30, 4 September 2021


You can dive right in and start programming - or you can watch this worked example: Flag of Benin

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


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);
}  

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.

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); 
}

Germany

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.

function drawFlag(ctx)
{
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,0,150,30);
} 
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);
}

Switzerland

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.

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
}
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);
}

United Arab Emirates

  • The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
  • The rectangle is 200 by 99.

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(50,0,150,33);
  ctx.fillStyle = 'red';
}
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);
}
Served by: dill at 2025-07-20T21:36

Navigation menu