HTML canvas addColorStop() Method

HTML canvas createPattern() Method

Last Updated : 09 Jun, 2023

The createPattern() method is used to repeat the specified element in the specified direction. It can be an image, a video or any other canvas element. Syntax:

context.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");

Parameters:

image: It specifies the image, canvas, or video element of the pattern to be used.
repeat: It repeats the pattern both horizontally and vertically. It is the default.
repeat-x: It repeats the pattern only horizontally.
repeat-y: It repeats the pattern only vertically.
no-repeat: It doesn't repeat the pattern .

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | canvas createPattern() Method
    </title>
</head>
<body>
    <h2 style="color:green;"> GeeksforGeeks </h2>
    <h2> HTML canvas createPattern() Method </h2>
    <p style="color:green;">Image to be used:</p>

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191126130440/Untitled183.png"
         id="geeks" width="32" height="32">

    <p>Canvas:</p>
    <canvas id="myCanvas" width="500" height="200" 
            style="border:2px solid ">
    </canvas>
    <br><br>

    <!-- Change the values here -->
    <button onclick="create('repeat')">Repeat</button>

    <!-- Script to repeat the pattern -->
    <script>
        function create(value) {
            var gfg = document.getElementById("myCanvas");
            var context = gfg.getContext("2d");
            context.clearRect(0, 0, gfg.width, gfg.height);
            var img = document.getElementById("geeks")
            var pattern = context.createPattern(img, value);
            context.rect(0, 0, 150, 100);
            context.fillStyle = pattern;
            context.fill();
        }
    </script>
</body>

</html>

Output:

Before clicking the button:
After clicking on repeat button:

Supported Browsers: The browsers supported by HTML canvas createPattern() Method are listed below:

Chrome
Mozilla Firefox
Internet Explorer 9.0
Opera
Safari

HTML canvas addColorStop() Method

S

shubham_singh

Improve

Article Tags :

Similar Reads

HTML Canvas Tutorial

HTML Canvas facilitates the element <canvas> to draw graphics on Canvas with the help of JavaScript. HTML Canvas offers various methods for drawing different shapes and lines. The HTML Canvas is a rectangular area defined via height and width on an HTML page. By default, HTML Canvas has no bor

HTML Canvas Basics

In this article, we will know HTML Canvas Basics, and their implementation through the examples. The HTML "canvas" element is used to draw graphics via JavaScript. The "canvas" element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods

HTML Canvas Drawing

HTML Canvas Drawing facilitates the <canvas> element, along with Properties that help to draw on the HTML canvas. The various properties, attributes & events can be used with <canvas> element. Utilizing JavaScript, we can manipulate the canvas element to draw shapes, paths, and image

HTML Canvas Coordinates

In this article, we will see the concept of coordinates in HTML Canvas Coordinates. In HTML canvas, the coordinates are very important because, with the understanding of these coordinates, we can easily draw any shapes or lines on the canvas. x-axis coordinates define the coordinates in horizontal a

HTML Canvas Lines

In this article, we will learn how to make lines in different styles on Canvas in HTML. There are various methods used to draw a line on canvas like beginPath(), moveTo(), lineTo(), and stroke(). There are also various properties like lineWidth, strokeStyle, etc. can be used to give styles to a line

HTML Canvas Shapes

HTML Canvas Shapes facilitate different shapes, i.e., rectangles, triangles, lines, arcs, and curves to draw on the HTML Canvas.Â For instance, to draw the line in the Canvas, the path will be used that implements the beginPath() method. Setting the path's starting point is achieved with moveTo(), w

HTML Canvas Rectangles

The HTML Canvas Rectangles facilitate the rect() method to draw rectangles on canvas. There are various attributes in the rect(x, y, width, height) method such as x and y defining the coordinates of the upper-left corner of the rectangle, width defining the width of the rectangle, and height definin

HTML Canvas Circles

HTML Canvas Circles facilitates the arc() method to make a circle where 0 is defined as the start angle and the end angle is 2*PI. The stroke() method is used to draw an outline of the circle and fill() is used to draw a filled circle we can give color with the fillStyle property. stroke() Method Cr

HTML Canvas Curves

HTML Canvas Curves facilitate the arc() method for making a circle or a part of a circle on the canvas. There are various attributes in the arc(x, y, r, s, e) method such as x and y defining the coordinates of the center of the circle, r defining the radius, s defining the start angle, and e definin

HTML Canvas Gradients

HTML Canvas Gradients is used to give a gradient effect on Canvas with the help of JavaScript. The different shapes, such as rectangles, circles, lines, text, etc, can be filled with Gradients. To create a gradient on Canvas, we can use two techniques, Linear Gradient and Radial Gradient. Linear Gra