How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
teespring.engineering
How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
1–10 of 22 posts
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#2Side note, but this is the first .engineering TLD I've seen in the wild and I like the use of it.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#3Very cool, Justin. It would be amazing if you guys open-sourced a Raphael.js killer.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#4Very cool, Justin. It would be amazing if you guys open-sourced a Raphael.js killer.
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.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#5Why is it that they use a png to show the svg? Why not just render the svg?
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#6Very cool, Justin. It would be amazing if you guys open-sourced a Raphael.js killer.
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.
Any specific reason to not use snapsvg?
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#7Why is it that they use a png to show the svg? Why not just render the svg?
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.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#8I 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.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#9Earlier quoted context omitted.
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.
Any specific reason to not use snapsvg?
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.
Re: How Teespring Uses Canvas, SVG, and the DOM to Design T-Shirts
#10There 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-...