How to create pattern html5 canvas

Pattern Tutorial of HTML5 Canvas

Learn to draw pattern using html5 Canvas


In this lecuture you will learn  how to draw pattern in HTML5 Canvas.


Introduction to Patterns:

A Pattern is used to fill or stroke an object using a predefined
graphic object to learn How to create pattern using html5 canvas. Visit youtube channel for complete video course of html5 covering all the main topic of html5 canvas like html5 canvas image annotation, html5 canvas drag and drop, html5 canvas layers and all the topics of html5 canvas javascript framework have been discussed.

This graphic object can be replicated(“tiled”) at fixed

intervals in x and y to covers area horizontally and vertically for
A pattern consist of an image source.This image can be still image
such as JPG,GIF,PNG, SVG or a frame of video.A repetition setting
create pattern from this image.
To create a pattern createPattern() method is used.
Two parameters are passed in this method,one is the image object and
other is “repeat”.
The syntax for making Pattern is .


var pattern =context.createPattern(image,repetition);

This method createPattern() takes two parameters.

1. image

This can be image , canvas or video element for pattern creation.
This is Object type.

2. repeat

This can takes four values.

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat

The pattern repeats in both direction ,horizontal and vertical.


This pattern repeats only in the horizontal direction.


Similarly This pattern repeat only in vertical direction.


Moreover This pattern prints only once and does not repeat further.

html5 canvas Pattern with full code example


<!DOCTYPE html>
        <title>Drawing </title>
        <canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
            var myImage = new Image();
        var myPattern = context.createPattern(myImage,"repeat");
        context.fillStyle = myPattern;
        context.rect(0, 0, canvas.width, canvas.height);


Drawing html5 canvas pattern

html5 Canvas pattern tutorial



Live Demo html5 Canvas Pattern on codepen


[codepen_embed height=500 theme_id=1 slug_hash=’VYMeaj’ user=’aslamwaqar’ default_tab=’html’



flower used for pattern

html5 Canvas pattern tutorial

Previous Page

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *