CODEWITHSUNDEEP
fabricjs
Daniel Bonnell
Daniel Bonnell

Reputation: 4997

FabricJS Scale/Zoom Canvas to fit container

I have my my FabricJS canvas inside a container with a fixed height/width in pixels. On the side I have a dropdown to change the canvas size to various presets. What I would like to do is automatically zoom out whenever I select a size that is either taller and/or wider than the container. So for example, if my container div is 800x600 and I select a canvas size of 1024x768, I want to zoom out so that the entire canvas is still visible. Conversely, I'd like to zoom in up to 100% if I select a smaller size (e.g. 200x200).

I found this example of zooming, but no matter how much you zoom out, the canvas size appears to stay the same. See screenshot:

enter image description here

How can I accomplish this?

enter image description here

As you can see here, the area with the thin red border is the canvas container. The white box is the canvas.

Upvotes: 1

Views: 5145

Answers (1)

Ben
Ben

Reputation: 979

You can use the canvas.setDimensions function to accomplish this. You pass two arguments to it; the first is an object specifying the height and width to change the canvas to and the second indicates whether to change the css, the actual size of the canvas, or both.

For example,canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} will set the actual size of the canvas to be 750x750, regardless of the display.

canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) will set the display size of the canvas to be 750x750, regardless of the actual size.

I'm not 100% sure whether the width or height require a px after it for css or for backstore, but that's a pretty simple thing to check. Also, if no argument is passed for the second parameter, it will change both.

Upvotes: 2

Related Questions