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?

i am trying to achieve similar to the above image in fabric js....

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?

i am trying to achieve similar to the above image in fabric js....

• javascript
• html
• fabricjs
• perspective

• 1 Not directly but you can use affine transformation or projection on the pixel buffer. – user1693593 Commented Oct 3, 2013 at 19:03
• Also see this answer stackoverflow./questions/3836036/… – user1693593 Commented Oct 3, 2013 at 19:07
• See groups.google./forum/#!topic/fabricjs/fKUNRYlJVAs – John Commented Oct 4, 2013 at 3:07

2 Answers 2

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 plete control over the transformation matrix.

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

Here's a Fiddle: http://jsfiddle/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]
});

i found a solution for fabricjs, using polygon and php-imagemagick. you can bine both.