Distorting a shape in Canvas by Clicking and Dragging a particular border point <p>I'm creating a floor-plan application using HTML5 and kinetic js.Currently I'm able to create a rectangular container where you can drag and drop objects inside it. You can see it in action in this link <a href="http://jsfiddle.net/wQ8YA/29/" rel="nofollow noreferrer">http://jsfiddle.net/wQ8YA/29/</a></p> <p>The js code to create it is..</p> <pre><code>//create a group var group = new Kinetic.Group({ draggable: true //make group draggable }); var rec = new Kinetic.Rect({ x: 10, y: 330, width: 600, height: 600 }); group.add(rec); </code></pre> <p>Currently the container looks like this</p> <p><img src="https://i.stack.imgur.com/yxtwu.png" alt="floor-plan"></p> <p>But i want to make it like this..</p> <p><img src="https://i.stack.imgur.com/34dMl.jpg" alt="new floor plan"></p> <p>In the second image the user can distort the container by clicking on any point on the container border and dragging it.I tried doing it on my own but don't know where to start,what this concept is called and how to achieve it.Please Help..</p>