function drawScreen() {
context.save();
drawPattern();
context.restore();
}
function drawPattern() {
context.fillStyle = “blue”; //
var i = 0, x = 5, y = 0;
context.fillRect(x, y, 20, 20);
}
Multiply the box:
function drawPattern() {
context.fillStyle = “blue”; //
var i = 0, x = 5, y = 0;
context.fillRect(x, y, 20, 20);
for (i; i < 100; i++) {
context.translate(5, 0);
x = x + 5;
context.fillRect(x, y, 20, 20);
}
}
context.fillStyle = “green”; //
if (isOdd(i)) {
context.fillStyle = “blue”; //
}
Repeat pattern throughout the canvas:
var z = 0;
for (z; z < canvas.height;) {
context.save();
context.translate(0, z);
drawPattern();
z = z + 10;
context.restore();
}
}
More patterns you can get with some code manipulations: