Attach image to custom area with a free transform - konvajs

Question

please assist me to complete it, i need free image transform, i have did main logic but not sure how to complete it. Image must be inside of my custom selection.
so i set only left top corner, but object havent additional x's and y's, for example x1,x2,x3,x4,y1,y2,y3,y4
image.setAttrs({
x: dashed.leftTop.attrs.x,
y: dashed.leftTop.attrs.y
});
i'm not sure how i can set neccessary corners. or there another way to complete it?
please help me to use skew with it?
https://jsfiddle.net/u9ck6b2q/

Answer 1

Currently, 2d canvas context doesn't have native methods to do that. So you have to write your own transform logic (or use the external library).
There are several demos that may be useful for you:
http://tulrich.com/geekstuff/canvas/perspective.html
http://www.html5.jp/test/perspective_canvas/demo1_en.html
I adopted your demo to combine it with the second code sample: https://jsfiddle.net/u9ck6b2q/3/
op = new html5jp.perspective(canvas.getContext('2d'), imageObj);
image.image(canvas);
op && op.p.ctxd.clearRect(0, 0, 1000, 1000);
op && op.draw([
[dashed.leftTop.attrs.x,
dashed.leftTop.attrs.y],
[dashed.rightTop.attrs.x,
dashed.rightTop.attrs.y],
[dashed.rightBottom.attrs.x,
dashed.rightBottom.attrs.y],
[dashed.leftBottom.attrs.x,
dashed.leftBottom.attrs.y],
[dashed.leftTop.attrs.x,
dashed.leftTop.attrs.y]
]);