Моя цель - обернуть изображение поверх кофейной кружки виртуально, используя HTML5 и javascript.

Я создал прототип:http://jsfiddle.net/sandeepkum88/uamov2m7/

В настоящее время я разрезаю изображение на полосы шириной 1px, а затем помещаю эти полосы на кривую Безье.

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);
    }
}

Но я не удовлетворен результатом.

Я делаю это где-то неправильно? Есть ли лучшая альтернатива? Что, если верхняя кривая и нижняя кривая разные.

Есть ли способ достичь этого с помощью матрицы преобразования?