Zoom to Middle of fabric.js Canvas

If you are working with mapping software, zooming is usually done to the middle of the viewport. By default zoom will use the top left as the origin.

First we’ll need to find the center of the canvas.

const center = canvas.getCenter();

const centerPoint = new fabric.Point(center.left, center.top);

Then we can zoom to the point.

canvas.zoomToPoint(centerPoint, 2);
canvas.requestRenderAll();