View source for Easy Flags

<pre id='shellbody'>
<canvas id='usr' width=150 height=100></canvas>
<canvas id='ans' width=150 height=100></canvas>
</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);
</pre>
==Libya==

<div class='qu'>
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'>
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,75,100);
}  
</pre>
<pre class='ans'>
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,150,100);
}  
</pre>
</div>

==France==
<div class=qu title='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.<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>