Canvas section between two areas with clip

So I have pretty aoying problem which I find hard to understand and fix. I want to have section between two areas in HTML5 canvas - one is a rectangle the other one is complex figure made with lines (pictures below):

The red figure is the complex area and the below light blue is rectangle which has part of it on the red figure.

I want to visualize only the area which has both the read and the blue area (the pink-ish color at the center).

The best I can do is this but is pretty inaccurate because the figure is distorted somehow.

I really don't know what seems to be the problem. Here is the code for the FIRST and SECOND pictures:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var pts = [
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  },
  {
    "x": 313.6363636363636,
    "y": 357.83576331700544
  },
  {
    "x": 482.72727272727275,
    "y": 390.79970884062334
  },
  {
    "x": 651.8181818181818,
    "y": 342.08032949810206
  },
  {
    "x": 820.909090909091,
    "y": 359.5816507117245
  },
  {
    "x": 990,
    "y": 394.7374924508338
  },
  {
    "x": 1159.090909090909,
    "y": 375.44796552459445
  },
  {
    "x": 1328.1818181818182,
    "y": 348.80309018743964
  },
  {
    "x": 1497.2727272727273,
    "y": 387.65889083719674
  },
  {
    "x": 1666.3636363636363,
    "y": 361.47353311915924
  },
  {
    "x": 1835.4545454545455,
    "y": 389.24337978312957
  },
  {
    "x": 1835.4545454545455,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  }
],
bufferSpace = 2,
clipX = 144.5,
clipY = 245,
clipWidth = 1692,
clipHeight = 580;

ctx.beginPath();
ctx.moveTo(pts[0].x, pts[0].y + bufferSpace);
for (var i = 0; i < pts.length; i++) {
  var pt = pts[i];
  ctx.lineTo(pt.x, pt.y + bufferSpace);
}
ctx.fillStyle = "red";
ctx.globalAlpha = 0.8;
ctx.closePath();
ctx.fill();

ctx.fillStyle = "blue";
ctx.globalAlpha = 0.2;
////ctx.fillStyle = fillcolor;
ctx.fillRect(clipX, clipY, clipWidth, clipHeight);

//ctx.save();
//ctx.clip();

//ctx.globalAlpha = 0.8;
//ctx.fillStyle = fillcolor;
//ctx.fillRect(clipX, clipY, clipWidth, clipHeight);
//loadPatteImage(clipX, clipY, clipWidth, clipHeight);

//ctx.restore();