Restrict area for draw image object in canvas HTML

Question

I want to restrict area for uploaded image in canvas. I am using fabric js to achieve this solution. I have seen one link, But did not get idea. that link is:Set object drag limit in Fabric.js. I also want to same thing, But i am not able to do this one.

what i want? i will show in screen shot.

var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
  canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
    crossOrigin: 'anonymous'
  });
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();

document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 140,
        top: 100,
        width: 250,
        height: 200,
        angle: 0
      }).scale(0.9);
       oImg.lockMovementX = true;
     
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

  canvas {
  border: 1px solid black;
}
#canvascolor input {
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
   <input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />

Answer 1

I extended your script to answer you. For your use case it looks like you could use some clipping function and uniform centered scaling.

Anyway the main question about restricting area for drawing is this:

var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
  canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
    crossOrigin: 'anonymous'
  });
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();
function clipTShirt(ctx) {
   ctx.save();
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   var x = 140, y = 100 ,w = 225, h = 300;
   ctx.moveTo(x, y);
   ctx.lineTo(x + w, y);
   ctx.lineTo(x + w, y + h);
   ctx.lineTo(x, y + h);
   ctx.lineTo(x, y);
   ctx.restore();
}
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 140,
        top: 100,
        width: 250,
        height: 200,
        angle: 0,
        lockUniScaling: true,
        centeredScaling: true,
        clipTo: clipTShirt
      }).scale(0.9);
       oImg.lockMovementX = true;
     
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

  canvas {
  border: 1px solid black;
}
#canvascolor input {
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
   <input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />