enrole a imagem em torno de um copo cilíndrico usando tela html 5 e javascript

Meu objetivo é envolver uma imagem sobre uma caneca de café virtualmente usando HTML5 e javascript.

Eu criei um protótipo:http://jsfiddle.net/sandeepkum88/uamov2m7/

Atualmente, estou cortando a imagem em tiras de 1px de largura e depois colocando essas tiras na curva de bezier.

var img = new Image();
img.onload = start;
img.src = "http://in-sandeep.printvenue.org/test-images/mug-strap.png";
var pointer = 0;

function start() {

    var iw = 198.97826;
    var ih = img.height;

    var x1 = 50;
    var y1 = 40;
    var x2 = 97;
    var y2 = 60;
    var x3 = 152;
    var y3 = 40;

    // calc unit value for t to calculate bezier curve
    var unitT = 1 / iw;

    // put image slices on the curve
    for (var X = 0, t = 0; X < iw; X++, t+=unitT) {
        var xTop = (1-t) * (1-t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;
        var yTop = (1-t) * (1-t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3;
        ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih-188);
    }
}

Mas não estou satisfeito com o resultado.

Estou fazendo errado em algum lugar? Existe alguma alternativa melhor. E se a curva superior e a inferior forem diferentes.

Existe uma maneira de conseguir isso usando a matriz de transformação?