Canvas How to - Draw patterns

Question

We would like to know how to draw patterns.
Answer


<!-- w  w  w  .j  a va2  s  .  c o  m-->



<!DOCTYPE HTML> <html> <head> <script> 
window.onload = function()
{
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   var smallImage = new Image();
   smallImage.src = "http://placehold.it/20x20";

   smallImage.onload = function()
   {  
      context.shadowOffsetX = 4;
      context.shadowOffsetY = 4;
      context.shadowBlur    = 20;
      context.shadowColor   = "lavender";
      context.strokeStyle   = "gray";
      context.lineWidth     = 1;

      // B2. REPEAT pattern variables. 
      var repeatPattern   = context.createPattern(smallImage, "repeat");
      var noRepeatPattern = context.createPattern(smallImage, "no-repeat");
      var repeatXPattern  = context.createPattern(smallImage, "repeat-x");
      var repeatYPattern  = context.createPattern(smallImage, "repeat-y");

      context.fillStyle = repeatPattern;
      context.fillRect   (125, 125, 325, 325);
      context.strokeRect (125, 125, 325, 325); 
      context.fillStyle = noRepeatPattern;
      context.fillRect   (0, 0, 100, 100);
      context.strokeRect (0, 0, 100, 100); 
      context.fillStyle = repeatXPattern;
      context.fillRect   (125, 0, 350, 100);
      context.strokeRect (125, 0, 350, 100); 
      context.fillStyle = repeatYPattern;
      context.fillRect   (0, 125, 100, 350);
      context.strokeRect (0, 125, 100, 350);
   }           
}
</script> </head> <body> 
<div    style  = "width:500px;   height:500px; 
                  margin:0 auto; padding:5px;">
<canvas id     = "canvasArea" 
        width  = "500"  height = "500" 
        style  = "border:2px solid black">
</canvas> </div> </body> </html>
The code above is rendered as follows: