Edit in JSFiddle

let stage;

const canvasW = 400,
      canvasH = 400,
      circleW = 2,
      circleNum = (canvasW / (circleW / 2) * 20),

      /**
        * ランダム値の関数の定義
        */ 
      randRange = (max, min) => Math.floor(Math.random() * (max + 1 - min) + min),
      randBasic = (max) => Math.floor(Math.random() * max),
      randSum = (max) => Math.floor((Math.random() + Math.random()) / 2 * max),
      randTime = (max) => Math.floor(Math.random() * Math.random() * max),
      randSquare = (max) => {
        let rand = Math.random();
        return Math.floor(rand * rand * max);
      },
      randRoot = (max) => Math.floor(Math.sqrt(Math.random()) * max),
      randSumReverse = (max) => Math.floor( (1 - (Math.random() + Math.random()) / 2) * max),
      randTimeReverse = (max) => Math.floor( (1 - Math.random() * Math.random()) * max),
      randSquareReverse = (max) => {
        let rand = Math.random();
        return Math.floor((1 - rand * rand) * max);
      },
      randRootReverse = (max) => Math.floor((1 - Math.sqrt(Math.random())) * max),

      /**
        * 塗り
        */ 
      draw = (myGraphics) => {

        let light = randRange(60, 80),
            hue = randRange(170, 180),
            color = `hsl(${hue}, 75%, ${light}%)`;
        myGraphics.beginFill(color).drawCircle(0,0, circleW);

      },

      /**
        * 描画の初期設定
        */ 
      init = (target, randFunc) => {

        stage = new createjs.Stage(target);

        stage.canvas.width = canvasW;
        stage.canvas.height = canvasH;

        if (window.devicePixelRatio) {
          let canvas = document.getElementById(target);
          canvas.style.width = canvas.width + "px";
          canvas.style.height = canvas.height + "px";
          canvas.width *= devicePixelRatio;
          canvas.height *= devicePixelRatio;
          stage.scaleX = stage.scaleY = window.devicePixelRatio;
        }

        for (var i = 0; i < circleNum; i++) {

          // シェイプを定義
          var shape = new createjs.Shape();
          // 表示リストに追加
          stage.addChild(shape);
          // 座標
          shape.x = randFunc(canvasW);
          shape.y = randFunc(canvasH);
          // 透明度
          shape.alpha = 0.5;
          // 塗りの関数を呼び出す
          draw(shape.graphics);

        }

        // 描画モード
        stage.compositeOperation = "lighter";
        // 更新
        stage.update();

      };

init('canvas01', randBasic);  // 満遍なく
init('canvas02', randSum);  // 中央に集まる
init('canvas03', randTime);  // 最小値に集まる
init('canvas04', randSquare);  // より最小値に集まる
init('canvas05', randRoot);  // 最大値に比例的に集まる
init('canvas06', randSumReverse);  // 中央に集まる
init('canvas07', randTimeReverse); // 最大値に集まる
init('canvas08', randSquareReverse); // より最大値に集まる
init('canvas09', randRootReverse);  // 最小値に比例的に集まる

<div class="wrap">
	<h1>CreateJS</h1>
	<p>random collection</p>
  <section>
    <h2 class="text-left">Basic <br>ー</h2>
    <canvas id="canvas01"></canvas>
  </section>
  <section>
    <h2 class="text-left">Sum <br>ー</h2>
    <canvas id="canvas02"></canvas>
  </section>
  <section>
    <h2 class="text-left">Times <br>ー</h2>
    <canvas id="canvas03"></canvas>
  </section>
  <section>
    <h2 class="text-left">Square <br>ー</h2>
    <canvas id="canvas04"></canvas>
  </section>
  <section>
    <h2 class="text-left">Root <br>ー</h2>
    <canvas id="canvas05"></canvas>
  </section>
  <section>
    <h2 class="text-left">Sum Reverse<br>ー</h2>
    <canvas id="canvas06"></canvas>
  </section>
  <section>
    <h2 class="text-left">Times Reverse<br>ー</h2>
    <canvas id="canvas07"></canvas>
  </section>
  <section>
    <h2 class="text-left">Square Reverse<br>ー</h2>
    <canvas id="canvas08"></canvas>
  </section>
  <section>
    <h2 class="text-left">Root Reverse<br>ー</h2>
    <canvas id="canvas09"></canvas>
  </section>
</div>