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

http://teespring.engineering/posts/how-teespring-uses-canvas-svg-dom-to-design-tshirts/

by justinmc • 11 years ago

113 21 11 years ago

teespring.engineering

stanmancan• 11 years ago

Side note, but this is the first .engineering TLD I've seen in the wild and I like the use of it.

xiaoma• 11 years ago

Very cool, Justin. It would be amazing if you guys open-sourced a Raphael.js killer.

justinmc2• 11 years ago

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.

slig• 11 years ago

Any specific reason to not use snapsvg?

dyladan• 11 years ago

Why is it that they use a png to show the svg? Why not just render the svg?

rhema• 11 years ago

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.

secondtimeuse2• 11 years ago

I have used http://fabricjs.com/ in another project (not related to printing). FabricJS is used/developed by printio.ru . Its a good open source alternative.

Ezhik• 11 years ago

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).

grumblestumble• 11 years ago

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 :/

secondtimeuse2• 11 years ago

I think you can implement programmatic zoom on canvas in fabricjs as well. E.g. See this http://www.eraseimage.com/ use mouse zoom on the left canvas.

agys• 11 years ago

There is also Unmade using an interactive Canvas to let customers modify (not create) their designs. I was pretty amazed by the quality of the realtime rendering. A few examples:

1. Dragging the pattern around (note the deforming):

https://preview.unmade.com/knitwear/jumpers/studio-moross/kn...

and

https://preview.unmade.com/knitwear/scarves/studio-moross/pa...

2. Modifying the pattern with some physics:

https://preview.unmade.com/knitwear/scarves/moniker/pied-de-...

Killswitch• 11 years ago

Nice write up, Justin! I was one of the first engineers at a competitor of TeeSpring's, and we tackled the same problems. We used Fabric.js in our second iteration (first was jQuery).

loopbit3• 11 years ago

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.

jkaunisv12• 11 years ago

Do you have a link to your site? I'm working on some similar stuff and would love to see what you've done.

bjterry• 11 years ago

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-...

colindean• 11 years ago

I'm impressed. A coworker and I designed and implemented a T-shirt customization app in Adobe Flex circa 2008 for RushImprint.com. Fun times.

imtu80• 11 years ago

Couple years ago I started a side project (inspired by teespring) and I end up using fabic.js https://github.com/imomin/CustomTShirt

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

Related Stories