Difference between revisions of "Easy Flags"

From ProgZoo
Jump to navigation Jump to search
Line 38: Line 38:
{
{
   ctx.fillStyle = 'blue;
   ctx.fillStyle = 'blue;
   ctx.fillRect(0,0,50,100);
   ctx.fillRect(50,0,50,100);
}
}
</pre>
</pre>

Revision as of 10:58, 1 August 2021

<canvas width=150 height=100></canvas>
drawFlag(document.querySelector('canvas').getContext('2d'));

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.

Flaglibya.png

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.
Flag guide france.png

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