Easy Flags: Difference between revisions
Jump to navigation
Jump to search
Line 38: | Line 38: | ||
{ | { | ||
ctx.fillStyle = 'blue; | ctx.fillStyle = 'blue; | ||
ctx.fillRect( | 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'));
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
xxxxxxxxxx
function drawFlag(ctx)
{
ctx.fillStyle = 'green';
ctx.fillRect(0,0,75,100);
}
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
xxxxxxxxxx
function drawFlag(ctx)
{
ctx.fillStyle = 'blue;
ctx.fillRect(50,0,50,100);
}
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); }