title: Create valley text (text with curve) in Fabric.js
body: <p><strong>I am using Fabric.js to display text on CANVAS.. which works great and displays text like below</strong></p>
  
  <p><img src="https://i.stack.imgur.com/f3MLM.jpg" alt="enter image description here"></p>
  
  <p><strong>What I am trying to achieve is Text effect like below below</strong></p>
  
  <p><img src="https://i.stack.imgur.com/r5G4E.gif" alt="enter image description here"></p>
  
  <p><strong>Instead of plain.. is it possible to do so?</strong></p>
  
  <p>Here is my code..</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;    
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;fabric.js-simple text display&lt;/title&gt;
  
      &lt;!-- Get version 1.1.0 of Fabric.js from CDN --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" &gt;&lt;/script&gt;
  
      &lt;!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; 
  
  &lt;body&gt;
          &lt;!-- A canvas tag is required or 
               Fabric.js doesn't know where to draw. --&gt;
          &lt;canvas id="c" style="border:1px solid black;" &gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
      // Place script tags at the bottom of the page.
      // That way progressive page rendering and 
      // downloads are not blocked.
  
      // Run only when HTML is loaded and 
      // DOM properly initialized (courtesy jquery)
      $(function () {
  
          // Obtain a canvas drawing surface from fabric.js
          var canvas = new fabric.Canvas('c');
  
          // Create a text object. 
          // Does not display it-the canvas doesn't 
          // know about it yet.
          var hi = new fabric.Text('hello, world.', {
              left: canvas.getWidth() / 2,
              top: canvas.getHeight() / 2     
          });
  
          // Attach it to the canvas object, then (re)display
          // the canvas.  
          canvas.add(hi);
  
      });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;/html&gt;
  </code></pre>