I want to wrap an image around a cylindrical object like mugs in a web app, like so 

[![Mug with personalised image](https://i.stack.imgur.com/qFUmg.jpg)](https://i.stack.imgur.com/qFUmg.jpg)

This will likely be a base image (e.g. a jpeg image of a mug) containing a transformed image of a user uploaded image.

There seems to be a lot of resources on this in [PhotoShop](http://www.stunningmesh.com/2010/10/wrap-the-pictures-around-any-object/). However, this is of course not appropriate for web, mobile or server environments. 

I also know this is possible, as a number of sites already do this extremely well. For example, [Vista Print](http://www.vistaprint.co.uk/studio.aspx?template=579412_A14&ag=True&xnav=previews&xnid=image_145&rd=1) (see image), [Asda Photos](https://www.asda-photo.co.uk/product-info/80-cushions/74-small-photo-cushion-30cm-sq) (and loads more on the internet by just searching personalised mugs on Google), using what seems to be just HTML5. 

However, bizarley I cannot seem to find any answers for a Web App. There's a lot of questions on this in StackOverflow that are all unanswered like: 
[Wrap an image around a cylinder](https://stackoverflow.com/questions/26489828/wrap-an-image-around-a-cylinder), [wrap image around a cylindrical cup using html 5 canvas and javascript](https://stackoverflow.com/questions/31424117/wrap-image-around-a-cylindrical-cup-using-html-5-canvas-and-javascript), [How overlay image over a cup using html5 canvas](https://stackoverflow.com/questions/20259495/how-overlay-image-over-a-cup-using-html5-canvas/20271387#20271387) and many many more!

Therefore can someone please finally provide an answer to this question.