Add background pattern to a png image in canvas

Question

As the title says, i want to add background pattern to a png image(not the whole canvas). I tried various guides but they are all about adding background pattern to whole canvas by either using background-image css property or by using canvas's createPattern method.

This is what i'm creating.

As you can see, there are various png images on the canvas(left arm, right arm, body, etc.) and they are all customizable. Now i want to add repeat-pattern to those png images. Those repeat pattern would be an image itself.

How to do that via svg, fabric or any other method?

Answer 1

A really simple way is to create a FOR loop to draw your PNG images at the size you need.

• Use the canvas width/height values,your image size and your preferred image distance to determine the number of iterations your loop needs to run.

• On each iteration increment a distance variable a certain value in order to blit your image at an increasing distance on the x/y axis.

When the loop ends you will have a pattern.