Canvas - draw repeated image

Question

Canvas - draw repeated image

Navigation

#1 by (1 votes)

1

How can I draw an image by repeating until I fill in an area? Something like the effect of CSS property background-repeat . Where the image is repeated until it fills the entire area of the tag.

javascript canvas

asked by anonymous 09.11.2016 / 15:59

1 answer

Sequential number in a dynamic form How popular jtable with xml file titles [closed]

score 1 · Accepted Answer

The canvas API has a feature for patterns.

An example:

var canvas = document.getElementById("my_canvas"),
context = canvas.getContext("2d"),

var img = new Image();

img.src = 'http://bit.ly/2fDRYfC';

img.onload = function(){
    var pattern = context.createPattern(img, 'repeat');
    context.fillStyle = pattern;
    context.fillRect(0, 0, canvas.width, canvas.height);
}