Using Patterns

We can create patterns using the createPattern method. The 2D drawing context defines support for three types of pattern:

  • image
  • video
  • canvas

createPattern method needs two parameters:

  • HTMLImageElement
  • the repeat style

The repeat style must be one of the values shown in the following table:

repeatThe image should be repeated vertically and horizontally
repeat-xThe image should be repeated horizontally
repeat-yThe image should be repeated vertically
no-repeatThe image should not be repeated in the pattern
canvas {
      border: thin solid black;
      margin: 4px
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      <img id="myID" hidden src="" />
            var ctx = document.getElementById("canvas").getContext("2d");
            var imageElem = document.getElementById("myID");
            var pattern = ctx.createPattern(imageElem, "repeat");
            ctx.fillStyle = pattern;
            ctx.fillRect(20, 20, 500, 140);
Click to view this demo.
  HTML CSS Book 

  1. Getting Started with the Canvas Element
  2. Getting a Canvas Context
  3. Drawing Rectangles
  4. Canvas Drawing State
  5. Setting the Line Join Style
  6. Using Gradients
  7. Using Patterns
  8. Using smaller shapes with an image pattern
  9. Drawing Images
  10. Using Video Images
  11. Using Canvas Images
  12. Setting the Fill & Stroke Styles
  13. Saving and Restoring Drawing State
  14. Drawing Using Paths
  15. Drawing Arcs
  16. Drawing Bezier Curves
  17. Drawing Text
  18. Using Shadows
  19. Using Transparency