
How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts - justinmc
http://teespring.engineering/posts/how-teespring-uses-canvas-svg-dom-to-design-tshirts/
======
agys
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...](https://preview.unmade.com/knitwear/jumpers/studio-
moross/knitiscape/75/)

and

[https://preview.unmade.com/knitwear/scarves/studio-
moross/pa...](https://preview.unmade.com/knitwear/scarves/studio-
moross/pattern/130/)

2\. Modifying the pattern with some physics:

[https://preview.unmade.com/knitwear/scarves/moniker/pied-
de-...](https://preview.unmade.com/knitwear/scarves/moniker/pied-de-poule-
fermier/119/)

------
Killswitch
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
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
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
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
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
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 :)

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

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

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

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

~~~
justinmc
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
Any specific reason to not use snapsvg?

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

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

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

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

