Following up from my last update about how the projective transformations were possible in the current Mapknitter tool, a live demo for projective transformations can be viewed here: http://18.104.22.168 . The github code: https://github.com/anishshah101/ImageDistortLeaflet/blob/master/DivDistort2.html
The corners can be clicked and dragged to see the effect of distortions.
These transformations are different from the one taking place through Cartagen in the existing Mapknitter tool. Instead of the image getting subdivided into triangles, the image gets transformed using the matrix3d property of webkits. Refer here for how this works. The transforms are applied on a div like the below image:
While we distort the image, the position of corners is updated using the padding of the image from the parent div.
The transformations are not entirely smooth as now and behaves weirdly when values lose meaning in the code. Will need to modify some code to achieve that.
Things to be done:
1) Since the transformations are taking place on a div, matrix3d class can be used but the same can't be used on an image inside the canvas. To implement these transitions on a canvas, I am working on 2 possibilities:
1.1) By creating DOM elements on a canvas (Refer here) and then transforming them.
1.2) By using WebGL on canvas.
2) Connecting the canvas with Leaflet.js.