Canvas - draw repeated image

Asked

Viewed 145 times

1

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

javascript canvas

  • Do you want to do this with Canvas? can you explain the question better? do you have any canvas images?

  • @Sergio yes, with canvas. I want to use the context.drawImage() function to draw an image, but it needs to repeat the same way as a backgroud of a tag with the CSS property background-repeat

1 answer

1


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);
}
  • 1

    I thank you, sorry I did not mark as answered before it was that I had simply forgotten.

Browser other questions tagged javascript canvas

You are not signed in. Login or sign up in order to post.