Aliasing Pattern

HTML

<canvas id="canvas"></canvas>

CSS

body {
  margin: 0;
  padding: 0;
}

JavaScript

var canvas = document.querySelector("canvas");
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext("2d");

function getTile(tileSize) {
  var canvas2 = document.createElement("canvas");
  var ctx2 = canvas2.getContext("2d");
  canvas2.width = tileSize;
  canvas2.height = tileSize;
  ctx2.fillStyle = "#000";
  ctx2.fillRect(0, 0, tileSize, tileSize);
  ctx2.font = "bold 85pt Verdana";
  ctx2.textAlign = "center";
  ctx2.textBaseline = "middle";
  ctx2.globalCompositeOperation = "xor";
  ctx2.beginPath();
  ctx2.fillText("S", tileSize / 2, tileSize / 2);
  return canvas2;
}

function dot(ctx, x, y, r) {
	ctx.beginPath();
  ctx.arc(x, y, r, 0, 2*Math.PI, false);
  ctx.fill();
}

function getTile2(s) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = s;
  canvas.height = s;
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, s, s);
  ctx.globalCompositeOperation = "xor";
  var r = 0.1 * s;
  dot(ctx, 0.7*s, 0.2*s, r);
  dot(ctx, 0.45*s, 0.175*s, r);
  dot(ctx, 0.3*s, 0.375*s, r);
  dot(ctx, 0.5*s, 0.5*s, r);
  dot(ctx, 0.7*s, 0.625*s, r);
  dot(ctx, 0.55*s, 0.825*s, r);
  dot(ctx, 0.3*s, 0.8*s, r);
  return canvas;
}

function render(ctx, tile, factor1, factor2) {
	var W = ctx.canvas.width;
  var H = ctx.canvas.height;
  var tileSize = tile.width;
	var tileSize1 = factor1 * tileSize;
  var tileSize2 = factor2 * tileSize;

	ctx.fillStyle = "#fff";
	ctx.fillRect(0, 0, W, H);
	ctx.fillStyle = "#000";

	for (var y = 0; y < H; y += tileSize2) {
    for (var x = 0; x < W; x += tileSize2) {
      ctx.drawImage(tile, x, y, tileSize2, tileSize2);
    }
  }

	for (var y = 0; y < H; y += tileSize1) {
    for (var x = 0; x < W; x += tileSize1) {
      ctx.drawImage(tile, x, y, tileSize1, tileSize1);
    }
  }
}

var tileSize = 150;
var tile = getTile2(tileSize);

//render(ctx, tile, 1, 1);
render(ctx, tile, 0.1, 0.104);