Fabric.js basic example

Fabric.js-basic-example.markdown

Fabric.js basic example

http://fabricjs.com/fabric-intro-part-1/#path_and_pathgroup

Forked from Wade Harrell's Pen Fabric.js basic example.

A Pen by Pablo Formoso on CodePen.

License.

index.html

<button id="rect">Rect</button>
<button id="circ">Circ</button>
<button id="save">Save</button>
<input type="text" id="text" />
<br> 
<canvas id="c" width="400" height="400"></canvas>
<br>  
<p class="save">
</p>

script.js

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

canvas.setBackgroundImage('http://lorempixel.com/400/400/fashion', canvas.renderAll.bind(canvas));
$("#text").on("click", function(e) {
text = new fabric.Text($("#text").val(), { left: 100, top: 100 });
	  canvas.add(text);
});
$("#rect").on("click", function(e) {
  	rect = new fabric.Rect({
    left: 40,
    top: 40,
    width: 50,
    height: 50,      
    fill: 'transparent',
    stroke: 'green',
    strokeWidth: 5,
			  });  
  canvas.add(rect);
});

$("#circ").on("click", function(e) {
  	rect = new fabric.Circle({
    left: 40,
    top: 40,
    radius: 50,     
    fill: 'transparent',
    stroke: 'green',
    strokeWidth: 5,
			  });  
  canvas.add(rect);
});

$("#save").on("click", function(e) {
  	$(".save").html(canvas.toSVG());
});

style.css

#c {
  background-color: grey;
  margin-top: 10px;
}

button {
  padding: 10px 20px;
}