4 ms·

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

113 points by justinmc 11y ago

stanmancan 11y ago
Side note, but this is the first .engineering TLD I've seen in the wild and I like the use of it.
xiaoma 11y ago
Very cool, Justin. It would be amazing if you guys open-sourced a Raphael.js killer.
- justinmc 11y 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 11y ago
    Any specific reason to not use snapsvg?
    - justinmc 11y ago
      We ended up having to duplicate some of the functionality of Raphael ourselves while writing the processing mentioned in the article (like to locate regions of an uploaded image after transformation). We thought it was best to just use this code to do the layout as well. It also ended up being a lot smaller than a full library, since we're not using a ton of features. That said we played around with Snapsvg, and it is great if you're lucky like us and don't have to support IE6.
dyladan 11y ago
Why is it that they use a png to show the svg? Why not just render the svg?
- rhema 11y 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.
secondtimeuse 11y ago
I have used http://fabricjs.com/ http://fabricjs.com/ in another project (not related to printing). FabricJS is used/developed by printio.ru . Its a good open source alternative.
- Ezhik 11y 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 11y 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 :/
  - secondtimeuse 11y ago
    I think you can implement programmatic zoom on canvas in fabricjs as well. E.g. See this http://www.eraseimage.com/ http://www.eraseimage.com/ use mouse zoom on the left canvas.
agys 11y 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/knitiscape/75/ https://preview.unmade.com/knitwear/jumpers/studio-moross/kn... and https://preview.unmade.com/knitwear/scarves/studio-moross/pattern/130/ 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-poule-fermier/119/ https://preview.unmade.com/knitwear/scarves/moniker/pied-de-...
Killswitch 11y 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).
- loopbit 11y 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.
  - jkaunisv1 11y 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.
    - loopbit 11y ago
      Hey, sorry I didn't see this before. You can go to www.loveandrobots.com, any example using upswing image files should use fabric.js
      - jkaunisv1 11y ago
        Thanks! That site is like an eery Dublin-doppelganger of my plans, would be cool to chat with you about it (though I get the impression you're no longer with them).
        loopbit 11y ago
        I'm no longer the CTO, but I'm still friends with the rest of the founders and lend a hand every now and again (I'm still a shareholder in the company). Drop me a line at malonso [at] loopbit.com if you want :)
- bjterry 11y 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-17 https://www.43layers.com/products/laser-cut-coasters/Custom-...
colindean 11y 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 11y ago
Couple years ago I started a side project (inspired by teespring) and I end up using fabic.js https://github.com/imomin/CustomTShirt https://github.com/imomin/CustomTShirt

113 points by justinmc 11y ago

stanmancan 11y ago

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

xiaoma 11y ago

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

justinmc 11y 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 11y ago
  Any specific reason to not use snapsvg?
  - justinmc 11y ago
    We ended up having to duplicate some of the functionality of Raphael ourselves while writing the processing mentioned in the article (like to locate regions of an uploaded image after transformation). We thought it was best to just use this code to do the layout as well. It also ended up being a lot smaller than a full library, since we're not using a ton of features. That said we played around with Snapsvg, and it is great if you're lucky like us and don't have to support IE6.

dyladan 11y ago

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

rhema 11y 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.

secondtimeuse 11y ago

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

Ezhik 11y 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 11y 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 :/
- secondtimeuse 11y ago
  I think you can implement programmatic zoom on canvas in fabricjs as well. E.g. See this http://www.eraseimage.com/ http://www.eraseimage.com/ use mouse zoom on the left canvas.

agys 11y 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/knitiscape/75/ https://preview.unmade.com/knitwear/jumpers/studio-moross/kn... and https://preview.unmade.com/knitwear/scarves/studio-moross/pattern/130/ 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-poule-fermier/119/ https://preview.unmade.com/knitwear/scarves/moniker/pied-de-...

Killswitch 11y 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).

loopbit 11y 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.
- jkaunisv1 11y 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.
  - loopbit 11y ago
    Hey, sorry I didn't see this before. You can go to www.loveandrobots.com, any example using upswing image files should use fabric.js
    - jkaunisv1 11y ago
      Thanks! That site is like an eery Dublin-doppelganger of my plans, would be cool to chat with you about it (though I get the impression you're no longer with them).
      - loopbit 11y ago
        I'm no longer the CTO, but I'm still friends with the rest of the founders and lend a hand every now and again (I'm still a shareholder in the company). Drop me a line at malonso [at] loopbit.com if you want :)
bjterry 11y 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-17 https://www.43layers.com/products/laser-cut-coasters/Custom-...

colindean 11y 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 11y ago

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