Fabricjs - Zoom Canvas In Viewport (possible?)

at the moment I try to implement a zoom-functionallity to a visual-editor based on the fabricjs-framework. I've looked around but got more and more confused as I recognized that th

Solution 1:

@Theo solution is great, but one thing: Instead of using object.scaleX and object.scaleY to scale each object in the canvas, you can just call once to canvas.setZoom(ZOOM_INDEX). (only from version 1.4.13 of fabricjs)

An example I made is Here

Solution 2:

you can create zoomIn & zoomOut functionality with the feabricjs either on the objects that they are on the canvas and ,also, on the canvas itself

in order to zoomIn and zoomOut the canvas itself , you should change its height and width parametes, into the zoomIn/zoomOut functions, so when it goes to change the objects, it will also change the canvas size:

for zoomIn:

canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
   canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

for zoomOut:

canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

please take a look on the live fiddle example that i made , which it zoomsIn and Out objects and canvas, the .

live fiddle example: http://jsfiddle.net/tornado1979/39up3jcm/

hope helps, good luck