Fabric js

by Kirubel Girma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<button type="button">Draw</button>
<button type="button">Not Draw</button>
<input id="txit" type="text">
<button id="io" type="button">Go</button>

<canvas class="canv" id="c"></canvas>

CSS

.canv {
  height: 100%;
  width: 100%;
  position: absolute;
  
}

JavaScript

var sc = new fabric.Canvas('c');

var rect = new fabric.Rect();


            
var path = new fabric.Path('M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111  C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587  c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z');

rect.set({ width: 100, height: 50, fill: '#f55', opacity: 0.7 });
sc.setHeight(window.innerHeight);

var comicSansText = new fabric.Text("Short cut lol is awesome", {
  fontFamily: 'arial'
});

sc.add(path);
sc.add(comicSansText)
sc.add(rect);

//sc.isDrawingMode = true;

rect.on('selected', function() {
  console.log('selected a circle');
});

// Resize when done
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
  sc.setHeight(window.innerHeight);
  sc.setWidth(window.innerWidth);
  sc.renderAll();
}

// resize on init
resizeCanvas();


function crtxt(){
	var txts = document.getElementById('txit').value;
}

document.getElementById ("io").addEventListener("click", crtxt, false);