How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts

We used fabric.js as well to create custom laser printed/engraved products. As with you, our first iteration was just standard javascript with jQuery, but fabric.js made a lot of things much easier.

We have a similar feature at 43Layers (e.g. [1]) and went through a couple iterations. Ours was made more complex because it has to mesh with a 3D canvas, so originally it was a combination of overlapping DOM elements, an SVG element, and a 3D canvas. We also use React, so movement of the selection box created events that generally had to flow through multiple react elements. Getting the coordinates of everything matching in all three contexts was an exercise in annoyance (given how simple it seems), especially for things like fonts which have bounding boxes which bear only a passing relationship with the actual bounding boxes of the text on screen.

Eventually, we ditched the SVG and moved more things into 3D, which made for a better design in the end. For example, now we calculate 3D geometry for the font from its curves and get an actual real bounding box for it.

Anyway, it's interesting to read about how other people solved the same problem.

1: https://www.43layers.com/products/laser-cut-coasters/Custom-...

Fabric.js is canvas-based, so it's a slightly different beast (although between being used in t-shirt designer tools, and having svg<->canvas conversion, the ultimate result is the same).

I'm using fabricjs for annotations as well and it's a great library. The biggest downfall of using canvas as a renderer as opposed to svg is that it doesn't look great if you provide zoom controls. Lovely crisp SVG paths rendered as pixels on a canvas :/

Thank you Mark! We were actually originally using Raphael but recently switched to something custom. We got a lot more performance for our use case. I would love to open source that code at some point.

Depending on the complexity of the SVG (e.g. scribbles on top of scribbles), rendering SVGs can be very slow. If the SVG is not changing, it makes sense to render it as little as possible. I am doing the same thing with a d3 project, where the browser has trouble redrawing 50k elements.