How to center pattern fill in FabircJs?

Question

How do I center the pattern fill of a FabricJS object? It seems the pattern is always oriented to top/left. I have tried setting originX and OriginY to 'center' on the pattern, the filled object, the canvas, nothing seems to help. Any idea?

Answer 1

I found the answer:

Patterns use offsets, and not origins. So, to simulate centering a pattern, consider the following requirements:

1. The center is at half-width of the object.
2. To be centered, the pattern object must be at the center point at half it's width.

pattern = new fabric.Pattern({
    source: function () {[...]},
    repeat: 'repeat',
    offsetX: [objectwidth/2] - [patternwidth/2],
    offsetY: [objectheight/2] - [patternheight/2]
});

That did it! If you changed the scale on either of the items, you will need to compensate for that as well.

Answer 2

In Pattern Example of Fabric.js there are only int values used as OriginX/Y.

Try to set it by number, to the half of your image size.