Fabric.js move background to center

Issue

I’m attempting to move the background image so that it’s center is positioned in the center of the screen rather than in the top left corner. So far, this code attempts to center it but it’s dependent on the size of the window and is inconsistent.

canvas.backgroundImage.left = -(canvas.backgroundImage.width / 2)
canvas.backgroundImage.top = -(canvas.backgroundImage.height / 2)

Solution

Any object in Fabric, including background images, can be centered with the center() method.

canvas.backgroundImage.center()

You can also call centerH() or centerY() for horizontal or vertical centering.

See http://fabricjs.com/docs/fabric.Object.html#center

Answered By – melchiar

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.