Fabric js

by Kirubel Girma

HTML

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

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

CSS

.edib_imgs {
  background: white;
}

JavaScript

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

var rect = new fabric.Rect();

fabric.Image.fromURL('http://lh3.googleusercontent.com/-66toxhAPImQ/VWK3N8BplJI/AAAAAAABCT0/I2oeDVbyXAo/uummannaq-1%25255B6%25255D.jpg?imgmax=800', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  sc.add(oImg);
});
            
rect.set({ width: 100, height: 50, fill: '#f55', opacity: 0.7 });

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

function cavdrawing(){
	sc.isDrawingMode = true;
};

function x_cavdrawing(){
	sc.isDrawingMode = false;
};

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

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

// resize on init
resizeCanvas();

//keydelete
window.onkeyup = function(e) {
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 46)
    {
	var activeObject = sc.getActiveObject(), activeGroup = sc.getActiveGroup();
    if (activeObject) {
            sc.remove(activeObject);
    }
    else if (activeGroup) {
            var objectsInGroup = activeGroup.getObjects();
            sc.discardActiveGroup();
            objectsInGroup.forEach(function(object) {
            sc.remove(object);
            });
    }
    }
      else if (key == 40)
    {
    	
    }
}

function crtxt(){
	var txts = document.getElementById('txit').value;
  var text = new fabric.Text(txts, { left: 100, top: 100});
	sc.add(text);
}



document.getElementById ("io").addEventListener("click", crtxt, false);
document.getElementById ("idrw").addEventListener("click", cavdrawing, false);
document.getElementById ("indrw").addEventListener("click", x_cavdrawing, false);