With all of these changes in place, we can now write text onto our canvas, as shown in this GIF:

Note that our implementation did not require us to change things like the text font, size, style, or color, and so I leave those kinds of improvements up to you, my dear readers.

Let's also take a few minutes to implement another useful FabricJS feature: polylines.

Freeform Lines (AKA Polylines)

"Freeform" lines are lines which are drawn freely onto the canvas: think using the pencil tool in Paint. FabricJS terms these "polylines" because in reality a "freeform" line consists of many tiny straight lines that combine to form what looks like curves. These straight lines are created by storing a list of ordinal points, between which lines are connected (essentially like playing a giant version of connect-the-dots).

As with Text, we need two parts: a drawer and a display component. Here's the drawer class:

GIF Time!

All of this together allows us to draw freeform lines, as shown in the below GIF:

Ta-da! Now we have some very useful tools added to our FabricJS canvas toolbox!

Summary

Just like with the basic shapes, for both Text and Polylines we needed to implement a drawer and a display component. Those classes then needed to be wired up to the main DrawingEditor class, and into the Razor Page markup and script.