HTML5 Background Patterns

Images can be used throughout web application, but sometimes it is useful to set images as backgrounds. Currently this option is possible with the help of CSS files. HTML5 makes this possible as well. We use HTML5 canvas API in order to accomplish this. 

In order to set background image for a path stroke of a fill, all we need is to set an image as our repeatable patter on a path stroke of a fill. 

Code example below will show you have it is done in HTML5


                function backgroundPatternExample(context) {

                    var myImage = new      Image();

                    myImage.src = 'image.jpg';

                    context.strokeStyle = context.createPatter(myImage,     'repeat');

                    context.lineWidth = 50;




There are different types of image repeat patters in HTML5. They are explained in the following list:

  • repeat – image is applied in all directions
  • repeat-x – image is repeated along x-dimension
  • repeat-y - image is repeated along y-dimension
  • no-repeat – image displayed only one time

As you can see HTML5 background patters is powerful set of functionality provided with the new version of HTML.

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …