ThreeJS Canvas rendering on iPad

Question

I've created an ThreeJS application, in modern browsers I'm using WebGL and in older browsers and tablets I'm using Canvas rendering because WebGL is not yet suported.

In PC Browsers (Chrome, IE, Firefox, Opera and Safari) the Canvas rendering has no issues. But when I use this on an iPad the rendering is totally messed up. Like the screenshots below:

I've created a custom Geometry which when the original image ratio is used, it's all OK (and PC is OK). But when I move one corner on iPad or more, it's messed up. The default Geometry I'm using is a copy of the original ThreeJS Three.CubeGeometry. And when people drag the corners I'm editing the x and y vertices.

I have tried to edit the faceVertexUvs but is only getting worse. I have no clue what it could be.

Below some code for changes the corners:

function onDocumentMouseMove(event) {
    if (!me.initMode || event.cus) {
        mouse.x = (event.originalEvent.pageX / me.backgroundImageWidth) * 2 - 1;
        mouse.y = -(event.originalEvent.pageY / window.innerHeight) * 2 + 1;

        var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);

        projector.unprojectVector(vector, camera);

        var dir = vector.sub(camera.position).normalize();
        var raycaster = new THREE.Raycaster(camera.position, dir);
        var intersects = raycaster.intersectObjects(objects);

        // Moving selected
        if (SELECTED) {

            me.drag();

            // Fix the X-Y when you don't use Z
            //      more info: http://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z
            var distance = -camera.position.z / dir.z;
            var pos = camera.position.clone().add(dir.multiplyScalar(distance));

            // What normally happens with 3d
            var intersects = raycaster.intersectObject(plane);
            var newPosition = pos; // intersects[ 0 ].point.sub( offset );

            var moveOldPosition = SELECTED.position.clone();
            SELECTED.position.copy(newPosition);
            SELECTED.position.z = 10;

            // Move door corner
            var index = $.inArray(SELECTED, objects);

            var oldPosition = $.extend({}, door.geometry.vertices[
                    index == 0 ? 0 :
                        index == 1 ? me.segments :
                            index == 2 ? me.segments * (me.segments + 1) :
                                index == 3 ? me.segments * (me.segments + 2) : 0
                ]);

            // Dragg center
            if (index == 4) {
                var diffX = newPosition.x - moveOldPosition.x,
                    diffY = newPosition.y - moveOldPosition.y;

                for (var i = 0; i < objects.length; i++) {
                    if (i != 4) {
                        objects[i].position.x += diffX;
                        objects[i].position.y += diffY;
                    }
                }
                door.position.x += diffX;
                door.position.y += diffY;

                xOffset += diffX;
                yOffset += diffY;
            }
            else {
                for (var i = 0; i < door.geometry.vertices.length; i++) {
                    // 4 = segments + 1
                    var colIndex = index == 1 || index == 3 ? (i % (me.segments + 1)) : me.segments - (i % (me.segments + 1)),
                        rowNr = index == 2 || index == 3 ? Math.floor(i / (me.segments + 1)) : me.segments - Math.floor(i / (me.segments + 1)),

                        partX = colIndex * 1 / me.segments,
                        partY = rowNr * 1 / me.segments,

                    //                        flipDiff = (!flipped ? 0 : (
                    //                                        index == 0 || index == 2 ? 100 : -100
                    //                                    )),
                        diffX = (newPosition.x - xOffset) - oldPosition.x, // (newPosition.x - xOffset + flipDiff) - oldPosition.x
                        diffY = (newPosition.y - yOffset) - oldPosition.y;

                    door.geometry.vertices[i].x += (diffX * partX * partY);
                    door.geometry.vertices[i].y += (diffY * partX * partY);
                    //door.geometry.vertices[ i ].z += ((newPosition.z - oldPosition.z) * ((1 / 3) * rowIndex));
                }

                door.geometry.verticesNeedUpdate = true;
            }
        } else if (intersects.length > 0) {
            if (INTERSECTED != intersects[0].object) {
                INTERSECTED = intersects[0].object;
                INTERSECTED.material.color = new THREE.Color(0xfdc689);

                plane.position.copy(INTERSECTED.position);
                plane.lookAt(camera.position);
            }

            $("body").css("cursor", 'move');
            me.mouseEnterDraggable();
            // Rotate
        }
        else if (controlsEnabled && mousedown) {
            INTERSECTED = null;
            $("body").css("cursor", 'auto');

            // Rotate
            mouseX = event.clientX - windowHalfX;
            targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
        }
        else {
            if (INTERSECTED) {
                me.mouseOutDraggable();
                INTERSECTED.material.color = new THREE.Color(0xf19001);
            }
            INTERSECTED = null;
            $("body").css("cursor", 'auto');
        }
    }
}