01generate-mosaic.css

.input-row{
  margin: 15px 0;
}
.input-data{
  width: 80px;
  margin: 0 5px;
}
.bt{
  display: block;
  margin: 0 auto 15px auto;
  padding: 10px 20px;
  cursor: pointer;
}
#canvas{
  display: block;
  max-width: 95%;
  max-height: 500px;
  margin: 15px auto;
  border: 1px solid #333;
}



@media screen and (min-width:769px) {
  #input-area{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }
  .input-row{
    width: 50%;
  }
}

02generate-mosaic.html

<div id="input-area">
  <div class="input-row">
    w:<input type="number" min="100" max="4000" id="input-w" class="input-data" placeholder="300" value="300">(100-4000)
  </div>
  <div class="input-row">
    h:<input type="number" min="100" max="4000" id="input-h" class="input-data" placeholder="300" value="300">(100-4000)
  </div>
  <div class="input-row">
    粒度:<input type="number" min="1" max="4000" id="input-q" class="input-data" placeholder="10" value="10">(1-4000)
  </div>
  <div class="input-row">
    色:<input type="color" id="input-c" class="input-data" value="#000000">
  </div>
  <div class="input-row">
    背景色:<select name="sel-bg" id="sel-bg">
      <option value="transparent">透明</option>
      <option value="white">白色</option>
    </select>
  </div>
</div>
<button id="bt-submit" class="bt">再生成</button>
<div id="msg-box"></div>
<canvas id="canvas"></canvas>
<button id="bt-dl" class="bt">画像をダウンロード</button>

03generate-mosaic.js

const input_w = document.getElementById('input-w');
const input_h = document.getElementById('input-h');
const input_q = document.getElementById('input-q');
const input_c = document.getElementById('input-c');
const input_data = document.getElementsByClassName('input-data');
const sel_bg = document.getElementById('sel-bg');
const bt_submit = document.getElementById('bt-submit');
const bt_dl = document.getElementById('bt-dl');
const msg_box = document.getElementById('msg-box');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//
[...input_data].forEach(el=>{
  el.addEventListener('input',draw);
});
sel_bg.addEventListener('change',draw);
bt_submit.addEventListener('click',draw);
bt_dl.addEventListener('click',download);
//
draw();

function draw(){
  //例外処理
  for(let i=0;i<input_data.length;i++){
    if(isNaN(Number(input_data[i].value))&&input_data[3]!=input_c){
      msg('入力値に誤りがあります。');
      return;
    }
  }
  if(
    Number(input_w.value)<100||
    Number(input_w.value)>4000||
    Number(input_h.value)<100||
    Number(input_h.value)>4000||
    Number(input_q.value)<1||
    Number(input_q.value)>4000
    ){
    msg('入力値が範囲外です。');
    return;
  }
  //粒度限界
  if(Number(input_q.value)/(Number(input_h.value)*Number(input_w.value))<1/100000){
    msg('画像サイズに対して粒度が小さすぎます。');
    return;
  }
  //初期処理
  const unit = Number(input_q.value);
  const row = Math.ceil(input_h.value/unit);
  const col = Math.ceil(input_w.value/unit);
  msg('');
  //描画
  canvas.width = input_w.value;
  canvas.height = input_h.value;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if(sel_bg.value=='white'){
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  for(let r=0;r<row;r++){
    for(let c=0;c<col;c++){
      ctx.globalAlpha = Math.random();
      ctx.fillStyle = input_c.value;
      ctx.fillRect(c*unit, r*unit, unit, unit);
    }
  }
  //style

}

function msg(str){
  msg_box.textContent = str;
  canvas.width = 300;
  canvas.height = 300;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function download(){
  const file_name = `mosaic.png`;
  const a = document.createElement('a');
  a.download = file_name;
  canvas.toBlob(blob=>{
    a.href = window.URL.createObjectURL(blob);
    a.click();
  },'image/png');
}