JSFiddle - React, Tailwind, and code Playground

by nurkiewicz

HTML

<canvas id="single" width="300" height="300">Not available</canvas>
<canvas id="sum" width="300" height="300">Not available</canvas>
<canvas id="avg" width="300" height="300">Not available</canvas>

CSS

canvas {
  border: 1px solid #000;
}

JavaScript

function fill(elementId, count, randFun) {
  var ctx = document.getElementById(elementId).getContext('2d');
  for (var i = 0; i < count; ++i) {
    var x = randFun() * 300;
    var y = randFun() * 300;
    ctx.fillRect(x, y, 1, 1);
  }
}

function averageOfRandom(count) {
  return function () {
    var total = 0.0;
    for (var i = 0; i < count; ++i) {
      total += Math.random();
    }
    return total / count;
  }
}

fill('single', 20000, Math.random);
fill('sum', 20000, averageOfRandom(2));
fill('avg', 20000, averageOfRandom(10));