loadFromJSON examples

Used in documentation (jsdoc tag)

by vijay pawar

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<!DOCTYPE html>
<html>

  <body>
      <button onclick="sendSelectedObjectToFront()"> FRONT </button>

    <button onclick="sendSelectedObjectBack()"> BACK </button>
    <canvas id="c" width="600" height="600"></canvas>

    <script>
      var canvas = new fabric.Canvas('c', {
        preserveObjectStacking: true
      });

      var pol = new fabric.Polygon([{
        x: 200,
        y: 0
      }, {
        x: 250,
        y: 50
      }, {
        x: 250,
        y: 100
      }, {
        x: 150,
        y: 100
      }, {
        x: 150,
        y: 50
      }], {
        left: 250,
        top: 150,
        angle: 0,
        fill: 'green'
      });

      var pol2 = new fabric.Polygon([{
        x: 200,
        y: 50
      }, {
        x: 200,
        y: 100
      }, {
        x: 100,
        y: 100
      }, {
        x: 100,
        y: 50
      }], {
        left: 300,
        top: 200,
        angle: 0,
        fill: 'blue'
      });
      canvas.add(pol, pol2);

      var selectedObject;
      canvas.on('object:selected', function(event) {
        selectedObject = event.target;
      });

      var sendSelectedObjectBack = function() {
        canvas.sendToBack(selectedObject);
      }
      
      var sendSelectedObjectToFront = function() {
        canvas.bringToFront(selectedObject);
      }

    </script>
  </body>

</html>

CSS

canvas {
  border: 1px solid #999;
}