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
painting.
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 .
Syntax:
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
repeat
The pattern repeats in both direction ,horizontal and vertical.
repeat-x
This pattern repeats only in the horizontal direction.
repeat-y
Similarly This pattern repeat only in vertical direction.
no-repeat
Moreover This pattern prints only once and does not repeat further.
————————————————————-
html5 canvas Pattern with full code example
———————————————————–
<!DOCTYPE html>
<html>
<head>
<title>Drawing </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context =canvas.getContext('2d');
var myImage = new Image();
myImage.src="http://learnhtml5canvas.com/wp-content/uploads/2015/02/flower.png";
var myPattern = context.createPattern(myImage,"repeat");
context.fillStyle = myPattern;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();
</script>
</body>
</html>
——————————————————–
Drawing html5 canvas pattern
——————————————–
—————————————–
=======================================
Live Demo html5 Canvas Pattern on codepen
========================================
[codepen_embed height=500 theme_id=1 slug_hash=’VYMeaj’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
flower used for pattern
