Edit in JSFiddle

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');   
canvas.width = 700;
canvas.height = 700;

const rad = (deg) => deg * Math.PI / 180;
const scale = (num) => 0.5 * Math.sqrt(2) * num;
const unscale = (num) => num / (0.5 * Math.sqrt(2));
const rect = (d) => ctx.fillRect(0, 0, d, d);

const l = (d, count) => {
	ctx.save();
  ctx.fillStyle = 'red';
  ctx.rotate(rad(315));
  ctx.translate(0, -d);
  rect(d);
  
  if (count--) {
  	l(scale(d), count);
    r(scale(d), count);
  }
  
  ctx.restore();
}

const r = (d, count) => {
	ctx.save();
  ctx.fillStyle = 'blue';
  ctx.translate(unscale(d), 0);
  ctx.rotate(rad(405));
  ctx.translate(-d, -d);
  rect(d);
  
  if (count--) {
  	l(scale(d), count);
    r(scale(d), count);
  }
  
  ctx.restore();
}


const count = 10;
const rectWidth = 50;
ctx.translate(300, 300);
rect(rectWidth);
l(scale(rectWidth), count);
r(scale(rectWidth), count);

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

#myCanvas {
   border: 1px solid #999;
}