Why is the fixed font size on canvas elements ignored and gets bigger in a larger canvas?

Question

My code aims to creates different width <canvas> elements and sets font to 20px for all, but the result shows the font getting bigger in larger windows!

Why? I’ve not instructed it to use different size fonts.

var n = 0,
  wind = 30,
  canv = [],
  ct = []

for (n = 0; n < wind; n++) {
  canv[n] = document.createElement('canvas');
  canv[n].id = "C" + n;
  canv[n].style.width = 30 * n + "px";
  canv[n].style.height = 30 * n + "px";
  canv[n].style.top = 5 * n + "px";
  canv[n].style.left = 5 * n + "px";
  canv[n].style.zIndex = n;
  canv[n].style.position = "absolute";
  canv[n].style.border = "2px solid";
  document.body.appendChild(canv[n]);
  ct[n] = canv[n].getContext("2d");
  ct[n].font = "20px Arial"
  ct[n].fillText(n, 20, 20)
}