Even Better Multiline Text Boundary Fitting For Fabric.js Text Objects

This is a revision of my previous post detailing how to get Fabric.js text objects with multiline strings to fit within a preset viewport or boundary. The original post can be found here. This version has been revised and will now automatically scale the font size to copyfit the text when the height of the text object is larger of the preset dimensions. In the previous version it would stop displaying the new lines.

This object will need to be customized to your specific needs. I may consider turning it into a library once it has been further tested. Here is an example of how to use it:

Provide the formatter object with the width and height of the viewport boundary. The formatter will then make sure that your text fits within that viewports boundary.

Multiline Text Boundary Fitting for Fabric.js Text Objects

If you want to fit a multiline string inside of a Fabric.js text object you’re going to need to adjust the text on the fly with newline breakpoints so that it flows smoothly. This is the method I’m currently using to achieve that. It handles inserting newlines so that they adjust to the width. In the future I may update it so that it also handles height constraints by scaling the font size. At the moment it will just stop displaying text that goes beyond the acceptable height. I’ve updated this library and created a new post for it.

Code has been removed. Instead, click the above link to view the updated post.

This method will add newline breakpoints whenever the width of the line exceeds the maximum width for the text object. It will break on individual words. If the text height of the text object becomes too tall to fit, it will remove lines below the maximum height. I’ve thought about making it so that the text font will shrink to fit inside the maximum height, but I haven’t implemented that yet. I’ll probably create another post if that is ever implemented. When I was originally planning this feature I used this example as a starting point.

Copyfitting Text to a Boundary With Fabric.js

In a product customization system my company is developing we needed to allow users to input custom text, but that text needs to fit within a predefined space. If the text did not fit, it should be shrunk to fit within the boundary / viewport. This example can also center it once the copyfitting is complete, but you can customize that to your needs.

In this example self.workspace is an instance of Fabric.js Canvas and self.canvasEle is an instance of Fabric.js Text. This method will also scale up content. We hook this method up to a text input and if a user decides that they want to remove text this implementation will also scale the text back up.

Text Width Boundaries for Fabric.js

In this post I will show my method of removing characters from Fabric.js Text objects so that they can fit within a max boundary. Fabric.js is my favorite HTML5 canvas library and I use it whenever I need to have interactive images and text on websites. It works very well for allowing customers to customize products.

This code sample displays how I handle text width boundaries:

In this example self.canvasEle is an instance of Fabric.js Text. self.workspace is an instance of Fabric.js Canvas.

Keep Part of an Object From Leaving the Workspace in Canvas and Fabric.js

My team has been working with HTML5 Canvas for a large JavaScript application for the past few months. We are using Fabric.js for parts where the user can manipulate and customize their own products that we will then create for them.

We require that a portion of their uploaded image always be visible on the canvas. This solution will keep the object visible on the canvas so that the user can never lose the image by dragging it off the canvas viewport.