Learn html - html tutorial - createpattern method in html5 canvas - html examples - html programs
- The createPattern() method is used to repeats the specific component in the specified direction.
- The component can be an image, video, or another component.
- The repeated component can be used to draw rectangles, circles, lines etc.
Syntax for createPattern() method in HTML5 Canvas:
Parameter Values for createPattern() method in HTML5 Canvas:
||To use image, canvas or video component
||The pattern repeats both horizontally and vertically. This is a default value.
||The pattern repeats only horizontally
||The pattern repeats only vertically
||The pattern will be displayed only once.
Sample coding for createPattern() method in HTML5 Canvas:
Code Explanation for createPattern() method in HTML5 Canvas:
- <img> tag is used to display smile image and the image id as “smile”.
- repeat is used to repeat the smile image in both vertical and horizontal direction.
- repeat-x to draw the smile image in horizontal direction.
- repeat-y to draw the smile image in vertical direction.
- no repeat to draw the smile image in only one time.
- “wikitechyCanvas” is used to declare the id value of the canvas tag.
- getElementById method is used to draw the element from <canvas> tag.
- getContext(“2d”): returns an object that provides methods and properties for drawing on the canvas.
- getElementById method is used to draw the “smile” from <img> tag.
- The createPattern() method is used to declared for smile image direction.
- fillstyle is used to fill the smile image to the canvas with the help of createPattern() method .
Output for createPattern() method in HTML5 Canvas:
- the canvas rectangle with width as 400 and height as 200.
- Here the output is displayed in repeat y pattern that repeat the image in y-direction (vertical).
- If click Repeat button, the image will be displays both vertical and horizontal directions.
- If click Repeat-x button the image will be displays in horizontal direction.
- If click No-repeat the image output will be displays only one time.
Browser Support createPattern() method in HTML5 Canvas:
Related Searches to createPattern Method in HTML5 Canvas
canvas createpattern scale
canvas pattern in html
canvas pattern offset
html5 canvas pattern scale
canvas fillstyle image