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: