HTML5 Canvas Reference - createPattern()

We can use a loaded image file or an entire other canvas as a fill pattern for a drawn shape.

There are currently four types of image fills:

repeat
repeat-x
repeat-y
no-repeat

The createPattern() method repeats the loaded image in the specified direction.

We can use the created pattern to fill shapes.

Browser compatibility


`createPattern()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

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

Parameter Values

image: image or canvas or video element
repeat: Default value. repeat both horizontally and vertically
repeat-x: repeats the pattern horizontally
repeat-y: repeats the pattern vertically
no-repeat: display image only once with no repeat

Example

The following code loads an image


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from   w  ww. ja v a 2s . co m-->
    var img = new Image();
    img.src = 'http://www.java2s.com/style/demo/border.png';
    img.onload = function () { 
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = ctx.createPattern(img, 'repeat');
            ctx.fillRect(0, 0, 64, 64);

    };


</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code compares the fours repeating values for creating patterns.


<!DOCTYPE html>
<html>
<body>
<!--  ww w  .ja va2 s  . com-->
<button onclick="draw('repeat')">Repeat</button> 
<button onclick="draw('repeat-x')">Repeat-x</button> 
<button onclick="draw('repeat-y')">Repeat-y</button> 
<button onclick="draw('no-repeat')">No-repeat</button>   
<br/>  
<canvas id="myCanvas" width="300" height="300"></canvas>

<script>

function draw(direction) {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height); 
    var img = document.getElementById("myImage")
    var pat = ctx.createPattern(img, direction);
    ctx.rect(0, 0, 500, 300);
    ctx.fillStyle = pat;
    ctx.fill();
}
</script>


<img src="http://www.java2s.com/style/demo/border.png" id="myImage"/>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to create pattern from created canvas.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var canvasPattern = document.createElement("canvas");
    canvasPattern.width = 10;<!--   w  w w .  ja v a 2s.  com-->
    canvasPattern.height = 10;
    var contextPattern = canvasPattern.getContext("2d");
    contextPattern.beginPath();
    contextPattern.strokeRect(0.5, 0.5, 10, 10);
    contextPattern.arc(5.5, 5.5, 3, 0, Math.PI);
    contextPattern.rect(3, 3, 1, 1);
    contextPattern.rect(7, 3, 1, 1);
    contextPattern.stroke();
    var pattern = context.createPattern(canvasPattern,"repeat");
    context.fillStyle = pattern;
    context.fillRect(20, 20, 100, 100);
    context.fill();
</script>
</body>
</html>

The code above is rendered as follows: