Difference between revisions of "Flags with Rectangles"

Latest revision as of 21:33, 28 August 2023

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

You will need to use the method fillRect
You will need to use the property fillStyle

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.

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

@@ Line 1: / Line 1: @@
-<pre id='shellbody'>
+<pre id='shellbody' data-qtp='canvas'></pre>
-<div style='background:silver;padding:5px'>
+You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin|Flag of Benin]]
-<canvas id='usr' width=200 height=100></canvas>
+*You will need to use the method [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect fillRect]
-<canvas id='ans' width=200 height=100 style='display:none'></canvas>
+*You will need to use the property [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle fillStyle]
-</div>
-</pre>
-<pre id='shelljs'>
---snippet-usr--
-drawFlag(document.getElementById('usr').getContext('2d'));
-(()=>{
-  --snippet-ans--
-  drawFlag(document.getElementById('ans').getContext('2d'));
-})();
-let [a,b] = ['usr','ans']
-    .map(id=>document.getElementById(id))
-    .map(elem=>elem.getContext('2d').getImageData(0,0,elem.width,elem.height))
-let diff = a.data.map((v,i) => v===b.data[i]?1:0).reduce((acc,v)=>acc+v,0)*100/a.data.length;
-let fb = document.createElement('div');
-fb.innerText = `Score: ${diff.toFixed(1)}`;
-document.body.appendChild(fb);
-fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);
-</pre>
 ==Libya==
-<div class='qu'>
+<div class='qu' data-width="150" data-height="100">
 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.
 [[Image:flaglibya.png|border]]
 <pre class='usr'>
@@ Line 47: / Line 27: @@
 ==France==
-<div class=qu title='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/>
@@ Line 72: / Line 52: @@
 ==Germany==
-<div class=qu title='Germany'>
+<div class=qu data-width=150 data-height=90>
 The flag of Germany is black, red and yellow.
@@ Line 98: / Line 78: @@
 ==Switzerland==
-<div class=qu title='Switzerland' imgOut='flag.png' width='100' height='100'
+<div class=qu width='100' height='100'
    className="Raster" level='1'>
 The flag of Switzerland is red with a white cross in the center.
@@ Line 121: / Line 101: @@
 ==United Arab Emirates==
-<div class=qu title='UAE' imgOut='flag.png' width='200' height='99'>
+<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.