title: Restrict area for draw image object in canvas HTML5
body: <p>I want to restrict the area that an image can be drawn on a canvas. I am using Fabric.js.</p>
  
  <p>I tried the following link, but it didn't work for me. <a href="https://stackoverflow.com/questions/19979644/set-object-drag-limit-in-fabric-js">Set object drag limit in Fabric.js</a>.</p>
  
  <p>I want any part of the image that would be drawn outside the red rectangle (pictured below) to just not be drawn.<a href="https://i.stack.imgur.com/YxVct.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YxVct.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = new fabric.Canvas('canvas');
  $("#canvascolor &gt; input").click(function() {
    canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
      crossOrigin: 'anonymous'
    });
  });
  // trigger the first one at startup
  $("#canvascolor &gt; 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();
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  canvas {
    border: 1px solid black;
  }
  #canvascolor input {
    height: 50px;
    width: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"&gt;&lt;/script&gt;
     &lt;input type="file" id="file"&gt;
  &lt;canvas id="canvas" width="520" height="520"&gt;&lt;/canvas&gt;
  &lt;section id="canvascolor"&gt;
    &lt;input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg"&gt;
    &lt;input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg"&gt;
  &lt;/section&gt;
  &lt;button href='' id='txt' target="_blank"&gt;submit&lt;/button&gt;&lt;br/&gt;
  &lt;img id="preview" /&gt;</code></pre>
  </div>
  </div>
  </p>