CanvasStatic Canvas

Adding shapes JS

 
<fabric-canvas></fabric-canvas>
<script>
  window.addEventListener('WebComponentsReady', function() {
    const rect = new fabric.Rect({
      top: 100,
      left: 100,
      width: 200,
      height: 200,
      fill: 'red'
    });

    document.querySelector('fabric-canvas').add(rect);
  });
</script>

Adding shapes HTML

 
<fabric-canvas>
  <fabric-rect top="100" left="100" width="200" height="200" fill="green"></fabric-rect>
</fabric-canvas>

Adding shapes and text HTML

A B C 
<fabric-canvas opt-viewport-transform="[1,0,0,1,200,0]">
  <fabric-path path="M 100 350 l 150 -300" stroke="red" stroke-width="5" fill="transparent"></fabric-path>
  <fabric-path path="M 250 50 l 150 300" stroke="red" stroke-width="5" fill="transparent"></fabric-path>
  <fabric-path path="M 175 200 l 150 0" stroke="green" stroke-width="5" fill="transparent"></fabric-path>
  <fabric-path path="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill></fabric-path>
  <fabric-circle left="95" top="345" radius="5"></fabric-circle>
  <fabric-circle left="245" top="45" radius="5"></fabric-circle>
  <fabric-circle left="395" top="345" radius="5"></fabric-circle>
  <fabric-i-text font-family="sans-serif" font-size="30" fill="black" left="70" top="330">A</fabric-i-text>
  <fabric-i-text font-family="sans-serif" font-size="30" fill="black" left="240" top="10">B</fabric-i-text>
  <fabric-i-text font-family="sans-serif" font-size="30" fill="black" left="410" top="330">C</fabric-i-text>
</fabric-canvas>