Question

is it possible that I can stretch side of a rectangle and change its shape from straight line to something else like arc or something by stretching it from center like shown below

Answer 1

You probably wouldn’t want to use an arc as suggested by someone else, as an arc will only give you, well an arc. A better approach would be to represent your rectangle (4 sides) as 4 cubic beziers. A cubic bezier with control points that are collinear with the start and end points will produce a straight line, so you can still represent a normal rectangle. Then when you want to stretch the sides into a curve, you simply move the control points out, in, up or down depending on the curve you want. It would probably be beneficial to get a quick understanding of beziers.

I’ll make a picture to illustrate this better and include it in several minutes.

So when we draw our rectangle the code will look something like this:

ctx.moveTo(p1.x,p1.y);
ctx.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
ctx.bezierCurveTo(cp3.x,cp3.y,cp4.x,cp4.y,p3.x,p3.y);
ctx.bezierCurveTo(cp5.x,cp5.y,cp6.x,cp6.y,p4.x,p4.y);
ctx.bezierCurveTo(cp7.x,cp7.y,cp8.x,cp8.y,p1.x,p1.y);