title: Wrap an image around a cylindrical object in HTML5 / JavaScript
body: <p>I want to wrap an image around a cylindrical object like mugs in a web app, like so </p>
  
  <p><a href="https://i.stack.imgur.com/qFUmg.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qFUmg.jpg" alt="Mug with personalised image"></a></p>
  
  <p>This will likely be a base image (e.g. a jpeg image of a mug) containing a transformed image of a user uploaded image.</p>
  
  <p>There seems to be a lot of resources on this in <a href="http://www.stunningmesh.com/2010/10/wrap-the-pictures-around-any-object/" rel="noreferrer">PhotoShop</a>. However, this is of course not appropriate for web, mobile or server environments. </p>
  
  <p>I also know this is possible, as a number of sites already do this extremely well. For example, <a href="http://www.vistaprint.co.uk/studio.aspx?template=579412_A14&amp;ag=True&amp;xnav=previews&amp;xnid=image_145&amp;rd=1" rel="noreferrer">Vista Print</a> (see image), <a href="https://www.asda-photo.co.uk/product-info/80-cushions/74-small-photo-cushion-30cm-sq" rel="noreferrer">Asda Photos</a> (and loads more on the internet by just searching personalised mugs on Google), using what seems to be just HTML5. </p>
  
  <p>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: 
  <a href="https://stackoverflow.com/questions/26489828/wrap-an-image-around-a-cylinder">Wrap an image around a cylinder</a>, <a href="https://stackoverflow.com/questions/31424117/wrap-image-around-a-cylindrical-cup-using-html-5-canvas-and-javascript">wrap image around a cylindrical cup using html 5 canvas and javascript</a>, <a href="https://stackoverflow.com/questions/20259495/how-overlay-image-over-a-cup-using-html5-canvas/20271387#20271387">How overlay image over a cup using html5 canvas</a> and many many more!</p>
  
  <p>Therefore can someone please finally provide an answer to this question.</p>