Perspective Transformation of object filled with image in fabricjs

Question

We have some objects filled with image source. Is it possible to achieve perspective transformation of the filled image with adjusting rectangular grid positions in fabric js?

Answer 1

True perspective distortions are not possible with FabricJS or other 2d canvas libraries.

Canvas's 2d context will not do perspective transforms.

Most canvas libraries, including fabricJS, use 2d contexts.

There is a canvas 3d context -- webGL that will do a good imitation of perspective transforms.

The threeJS library by mrdoob is a good 3d context library:

http://mrdoob.github.io/three.js/

[ addition: non-perspective skewing are possible (results are always parallel to the original) ]

In fabricJS you have complete control over the transformation matrix.

You can use that matrix to do parallel-only skewing.

Here's a Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

How:

fabricObject.transformMatrix takes an array of 6 elements with each element representing the parts of an affine transformation matrix.

In that matrix, the 2nd and 3rd elements represent the SkewY and SkewX.

So to create your skewY, you could create an rect like this:

var rect = new fabric.Rect({
  left: 150,
  top: 150,
  width: 75,
  height: 50,
  fill: 'green',
  angle: 0,
  padding: 10,
  transformMatrix:[1,.30,0,1,0,0]
});