http://stackoverflow.com/questions/33950276/get-co-ordinates-of-rectangle-drawn-using-fabric-js-and-make-that-rectangle-not

by mahbubur rahman

HTML

<div class="container">
        <div class="column1">
           <canvas id="panel" width="500" height="333" style="border:1px solid red">     </canvas>     
        </div>
   <input type='button' value='save canvas ' id='saveBtn'>

 </div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

CSS

.container{
    
}

JavaScript

var _canvas;
(function() {
var canvas = new fabric.Canvas('panel');
  _canvas = canvas;
          canvas.add(new fabric.Rect({
            left:50,
            top:50,
            width:100,
            height:100,
            stroke:'green',
            strokeWidth:3,
            fill:'#ccc'
        })).renderAll();
})();

$(document).ready(function(){
  $('#saveBtn').click(function(){
    var a = document.createElement("a");    
    a.style = "display: none";    
        var data1 = JSON.stringify(_canvas.toJSON()),
            data2 = _canvas.toDataURL(),
            blob1 = new Blob([data1], {type: "octet/stream"}),
            blob2 = new Blob([data2], {type: "octet/stream"}),
            url1 = window.URL.createObjectURL(blob1),
            url2 = window.URL.createObjectURL(blob2);
        a.href = url1;
        a.download = 'canvasDataInJson';
      document.body.appendChild(a);
        a.click();
        a.href = url2;
        a.download = 'canvasDataInPng';
        a.click();
    
      document.body.removeChild(a);
  })
})