Canvas 如何将fabric.js画布分成4个相等的部分？

我需要知道如何将画布分成四个相等的部分。以及了解如何将对象分别添加到每个零件中

我尝试将两个画布创建为一个画布，但它不起作用。

您可以查看

(function() {
  var canvas = new fabric.Canvas('ex10');
  var clipPath = new fabric.Rect({ width: 250, height:250, top: 0, left: 0, absolutePositioned: true });
  var clipPath2 = new fabric.Rect({ width: 250, height:250, top: 0, left: 250, absolutePositioned: true });
  var clipPath3 = new fabric.Rect({ width: 250, height:250, top: 250, left: 0, absolutePositioned: true });
var clipPath4 = new fabric.Rect({ width: 250, height:250, top: 250, left: 250, absolutePositioned: true });
  fabric.Image.fromURL('assets/dragon.jpg', function(img) {
    img.clipPath = clipPath;
    img.scaleToWidth(250);
    canvas.add(img);
  });
  fabric.Image.fromURL('assets/dragon2.jpg', function(img) {
    img.clipPath = clipPath2;
    img.scaleToWidth(250);
    img.left= 250;
    canvas.add(img);
  });
    fabric.Image.fromURL('assets/dragon2.jpg', function(img) {
    img.clipPath = clipPath3;
    img.scaleToWidth(250);
    img.top= 250;
    canvas.add(img);
  });
  fabric.Image.fromURL('assets/dragon.jpg', function(img) {
    img.clipPath = clipPath4;
    img.scaleToWidth(250);
      img.top= 250;
      img.left= 250;
    canvas.add(img);
  });
})()