Categories
FabricJS

Create shapes with fabric JS

This is a basic canvas application that can create shape and added to the canvas triggered from the button.

Create Canvas Page

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proghubsterzeak</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/izitoast/dist/css/iziToast.min.css">
</head>

<body>
  <header>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-text">
        <a href="https://proghubsterzeak.com/"> https://proghubsterzeak.com</a>
      </span>
    </nav>
  </header>

  <main class="my-5">
    <section>
      <div class="container">
        <div class="btn-shapes d-flex justify-content-center my-3">
          <a class="btn btn-danger mx-2 shape-sel" shape-data="circ" href="javascript:void(0)">Circle</a>
          <a class="btn btn-success mx-2 shape-sel" shape-data="rect" href="javascript:void(0)">Rectangle</a>
          <a class="btn btn-warning mx-2 shape-sel" shape-data="tria" href="javascript:void(0)">Triangle</a>
          <a class="btn btn-primary mx-2 shape-sel" shape-data="line" href="javascript:void(0)">Line</a>
          <a class="btn btn-secondary mx-2 shape-sel" shape-data="poly" href="javascript:void(0)">Polygon</a>
        </div>
        <div class="row justify-content-center">
          <canvas width="767" height="450" id="my-canvas"></canvas>
        </div>
      </div>
    </section>
  </main>

  <script src="./assets/jquery/jquery.min.js"></script>
  <script src="./assets/izitoast/dist/js/iziToast.min.js"></script>
  <script src="./assets/fabric/fabric.min.js"></script>
  <script src="./assets/js/custom.js"></script>
</body>

</html>

Create JS Function

(function ($) {
  let canvas = new fabric.Canvas('my-canvas', {
    containerClass: 'canvas-wrapper',
    preserveObjectStacking: true,
    backgroundColor: '#ccc'
  });

  let circ = new fabric.Circle({
    radius: 100,
    fill: 'red'
  });

  canvas.add(circ);
  circ.center();

  $(".shape-sel").click(function () {

    var activeObj = canvas.getActiveObject();
    var sel_value = $(this).attr('shape-data');

    switch (sel_value) {
      case 'circ':
        if (activeObj != null) {

          canvas.remove(activeObj);

          let shape = new fabric.Circle({
            radius: 100,
            fill: 'red'
          });
          canvas.add(shape);
          shape.center();

        } else {
          flashMessage();
          return false;
        }
        break;

      case 'rect':
        if (activeObj != null) {

          canvas.remove(activeObj);

          let shape = new fabric.Rect({
            fill: 'green',
            width: 400,
            height: 200,
          });
          canvas.add(shape);
          shape.center();

        } else {
          flashMessage();
          return false;
        }
        break;

      case 'tria':
        if (activeObj != null) {

          canvas.remove(activeObj);

          let shape = new fabric.Triangle({
            fill: 'yellow',
            width: 200,
            height: 200,
          });
          canvas.add(shape);
          shape.center();

        } else {
          flashMessage();
          return false;
        }
        break;

      case 'line':
        if (activeObj != null) {

          canvas.remove(activeObj);

          let shape = new fabric.Line([10, 100, 300, 200], {
            stroke: 'blue'
          });
          canvas.add(shape);
          shape.center();

        } else {
          flashMessage();
          return false;
        }
        break;

      case 'poly':
        if (activeObj != null) {

          canvas.remove(activeObj);

          let shape = 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: 'gray'
          });
          canvas.add(shape);
          shape.center();

        } else {
          flashMessage();
          return false;
        }
        break;
    }
  });

  /*Flash Message*/
  function flashMessage() {
    iziToast.warning({
      title: 'warning :',
      message: 'No object selected',
      timeout: 4000,
      animateInside: true,
      position: 'topRight',
    });
  }

})(jQuery);

If you want to get source code, please click Download Code button on below link. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Share this
  •  
  •  
  •  
  •  
  •  
  •  
  • 42
    Shares

Leave a Reply

Your email address will not be published. Required fields are marked *