Witam.
Potrzebuję wyświetlić obrazek w canvasie ale nie jako kwadrat czy prostokąt ale jako dowolny czworobok (obrazek będzie texturą na ścianę sześcianu).
Dane jakie mam to : pozycja x,y,z wierzchołków czworoboku, oraz pozycja x,y wierzchołków już na canvasie. Wiem że trzeba będzie użyć funkcji transform ale nie wiem jak obliczyć macierz której pola są argumentami tej funkcji.
Z góry dzięki za pomoc i poświęcony czas.

EDIT:
znalazłem rozwiązanie ale przy przybliżaniu pochylonych powierzchni dziwnie się wykrzywiają: http://werty12121.redirectme.net/
funkcja która odpowiada za ryzowanie tekstur to :

function textureMap(texture, pts) {
            var tris = [[0, 1, 2], [2, 3, 0]]; // Split in two triangles
            var u0_t = [300, 0], u1_t = [300, 0], u2_t = [0, 300];
            var v0_t = [300, 0], v1_t = [0, 300], v2_t = [0, 300];
            for (var t = 0; t < 2; t++) {
                var pp = tris[t];
                var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x;
                var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y;
                var u0 = u0_t[t], u1 = u1_t[t], u2 = u2_t[t];
                var v0 = v0_t[t], v1 = v1_t[t], v2 = v2_t[t];

                // Set clipping area so that only pixels inside the triangle will
                // be affected by the image drawing operation
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(x0, y0);
                ctx.lineTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.closePath();
                ctx.clip();

                // Compute matrix transform
                var delta = u0 * v1 + v0 * u2 + u1 * v2 - v1 * u2 - v0 * u1 - u0 * v2;
                var delta_a = x0 * v1 + v0 * x2 + x1 * v2 - v1 * x2 - v0 * x1 - x0 * v2;
                var delta_b = u0 * x1 + x0 * u2 + u1 * x2 - x1 * u2 - x0 * u1 - u0 * x2;
                var delta_c = u0 * v1 * x2 + v0 * x1 * u2 + x0 * u1 * v2 - x0 * v1 * u2 - v0 * u1 * x2 - u0 * x1 * v2;
                var delta_d = y0 * v1 + v0 * y2 + y1 * v2 - v1 * y2 - v0 * y1 - y0 * v2;
                var delta_e = u0 * y1 + y0 * u2 + u1 * y2 - y1 * u2 - y0 * u1 - u0 * y2;
                var delta_f = u0 * v1 * y2 + v0 * y1 * u2 + y0 * u1 * v2 - y0 * v1 * u2 - v0 * u1 * y2 - u0 * y1 * v2;

                // Draw the transformed image
                ctx.transform(delta_a / delta, delta_d / delta,
                    delta_b / delta, delta_e / delta,
                    delta_c / delta, delta_f / delta);
                ctx.drawImage(texture, 0, 0);
                ctx.restore();
            }
        }

jeśli ktoś wie dlaczego tak się dzieje to proszę o pomoc.
EDIT:
wystarczyło dzielić kwadrat na więcej trójkątów, problem rozwiązany