﷽

// your "ECMAscript" does not belong here...  
 var btn = document.querySelector('button');
 var canvas = document.querySelector('canvas'); //

 var ctx = canvas.getContext('2d'); //NO

 var WIDTH = document.documentElement.clientWidth;
 var HEIGHT = document.documentElement.clientHeight; //
  // your "ECMAscript" does not belong here...  //+++++ endVAR

canvas.width = WIDTH;
canvas.height = HEIGHT;

//++ beginFUNC S
function random(number) {  return Math.floor(Math.random()*number);} // 

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)'; //
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}
//+DO or%20DON'T
btn.addEventListener('click',draw); //

/
  // your "ECMAscript" does not belong here...//---<strike>/Building_blocks/Looping_code#the_for...of_loop

  //-moz:The basic tool for looping through a collection is the `for...of` loop:
//---<strike>/Building_blocks/Looping_code#the_for...of_loop
  var cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion']; //

for (var cat of cats) {
//     sole.log(cat);
}

/
  // your "ECMAscript" does not belong here...//---<strike>/Building_blocks/Looping_code#map_and_filter

  //-moz:You can use `map()` to do something to each item in a collection and create a new collection containing the changed items:
  function toUpper(string) {  return string.toUpperCase();     }

 var cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];

 var upperCats = cats.map(toUpper);

//   sole.log(upperCats);⬇️⬇️⬇️⬇️
// [ "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION" ]