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

<script>

    function backgroundPatternExample(context) {

        var myImage = new Image();

        myImage.src = 'image.jpg';

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

        context.lineWidth = 50;

        context.stroke();

    }

</script>

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.