JavaScript graphic example: plane mosaic pattern

Mosaic with one or several plane figures of the same shape and size, and lay them together without any gap or overlap, is called plane mosaic of these figures.

1. A planar mosaic pattern realized by a polygon

We can use regular triangle, square or regular hexagon to realize plane mosaic.

(1) Tile with a square.

It’s easy to use square for plane mosaic. Write the following HTML code.

   var canvas = document.getElementById(‘myCanvas’);

   var ctx = canvas.getContext(‘2d’);

   var color=[‘#00FFFF’,’#00FF00′];

   var L=50;

   for (k=0;k<10;k++)

   {

      y=k*L;

      x0=0;

      for (i=0;i<10;i++)

      {

          x=x0+i*L;

          ctx.strokeStyle=”black”;

          ctx.strokeRect(x,y,L,L);

          ctx.fillStyle = color[(k+i)%2];

          ctx.fillRect(x,y,L,L);

      }

   }