Drawing Basic Patterns In Canvas

Begin with drawing a simple rectangular blue box like this: 

        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);

            }

        }

Switch colors:

context.fillStyle = “green”; //

                if (isOdd(i)) {

                    context.fillStyle = “blue”; //

                }

Repeat pattern throughout the canvas:

function drawScreen() {

            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: