How to alway center clipped area while resize window in FabricJS?

Question

Please help me resolve this problem.
I have a canvas area alway fill up screen size with background is gray. And rectangle clip path with size 300 x 300 --> how to make this clip path alway display at center of canvas while resize window ? ( and all elements inside clip path view still keep their relative position to it )

Actual:

Expected:

Here are the my problem:
https://jsfiddle.net/thobn24h/uqwoy7d3/13/

var canvasObject = document.getElementById("editorCanvas");
  // set canvas equal size with div
  $(canvasObject).width($("#canvasContainer").width());
  $(canvasObject).height($("#canvasContainer").height());
 
 canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
  });

  canvas.controlsAboveOverlay = true;

  // Add canvas clip path
  var clipPath = new fabric.Rect({ 
      left: 50,
      top: 50,
      width: 300,
      height: 300 });

  canvas.clipPath = clipPath;

  // create a rectangle object
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 150,
    height: 150
  });

  rect.set({
    transparentCorners: false,
    rotatingPointOffset: 40,
    cornerColor: 'black',
    cornerStrokeColor: 'black',
    borderColor: 'black',
    cornerSize: 12,
    padding: 10,
    cornerStyle: 'circle',
    borderDashArray: [3, 3]
  });

  // "add" rectangle onto canvas
  canvas.add(rect);

  var text = new fabric.Text('hello world', { left: 100, top: 100 });
  canvas.add(text);

  // Tracking resize windows event
  window.addEventListener('resize', resizeCanvas, false);

#canvasContainer {
            width: 100%;
            height: 100vh;
            background-color: gray;
        }

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

<script>

  function resizeCanvas() {

    canvas.setDimensions({
     width: $("#canvasContainer").width(),
     height: $("#canvasContainer").height()
   });

 }
 </script>

Thank you in advance!

Answer 1

In your function resizeCanvas you need to move all the item relative to the width.

Here is the code:
I did remove some of your code that was not required to reproduce this issue.

var canvasObject = document.getElementById("editorCanvas");
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

canvas.controlsAboveOverlay = true;

function resizeCanvas() {
  var w = $("#canvasContainer").width();
  var h = $("#canvasContainer").height();
  canvas.setDimensions({ width: w, height: h });
  
  clipPath.left = w/2 - clipPath.width/2;  
  rect.left = clipPath.left + 50;  
  text.left = clipPath.left + 50;  
}


// Add canvas clip path
var clipPath = new fabric.Rect({left: 50, top: 50, width: 300, height: 300});
canvas.clipPath = clipPath;

// create a rectangle object
var rect = new fabric.Rect({
  left: 100, top: 100, fill: 'red', width: 150, height: 150
});
canvas.add(rect);

var text = new fabric.Text('hello world', {left: 100, top: 100});
canvas.add(text);

// Tracking resize windows event
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas()

#canvasContainer {
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

Answer 2

var canvas = document.getElementById("editorCanvas");
var ctx = canvas.getContext("2d");

var canvasWidth = 300;
var canvasHeight = 300;
canvas.width = canvasWidth;
canvas.height = canvasHeight;

var redRectWidth = 150;
var redRectHeight = 150;

// Tracking resize windows event
var $window = $(window);
$window.resize(function(){
  var windowWidth = $window.width();
  var windowHeight = $window.height();
  
  var redRectLeft = canvasWidth/2 - redRectWidth/2;
  var redRectTop = canvasHeight/2 - redRectHeight/2;
  //clear the canvas to draw again
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx.save();
  //draw red square
  ctx.fillStyle = "red";
  ctx.fillRect(redRectLeft,redRectTop,redRectWidth,redRectHeight);
  //write black text
  ctx.fillStyle = "black";
  ctx.textAlign = "center";
  ctx.font="20px Arial";
  ctx.fillText("Hello World",redRectLeft + redRectWidth/2,redRectTop + redRectHeight/2);
  //restore default style of canvas
  ctx.restore();
  
}).trigger("resize");

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
  /*this will center the canvas in the middle*/
  display: flex;
  justify-content: center;
  align-items: center;
}
#editorCanvas{
  background-color: white;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>