Every programmer knows that when you meet a problem that you don’t know how to solve, you just search for the answer online. And this works 99% of the time. But occasionally you don’t find a solution, and you have to figure it out yourself. Hopefully this blog post means some other programmer doesn’t have to do the hard yards we have done. Our problem was simple. We wanted to show artwork on a hoodie where the drawstrings hang over the artwork.
Previously, when artists uploaded an artwork to Redbubble, we used the same image for all of the clothing styles and the sticker style. Both worked best with a PNG with transparency, and stickers don’t offer any options for editing, so it seemed an obvious choice. But artists have long been asking for these to be split out. And we’ve focused on adding more clothing styles lately, so we decided now was a good time to separate the sticker upload. The problem was that in the uploader we wanted to show the artist a preview of what the sticker would look like after we add the white border to it, and we wanted to do this in the browser in HTML5