canvas to json, svg

fabricjs

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>
<button id="canvas2json">Canvas 2 JSON</button>
<button id="canvas2svg">Canvas 2 SVG</button>

JavaScript

var canvas = new fabric.Canvas('paper', { isDrawingMode: true });
$("#select").click(function(){
    canvas.isDrawingMode = false;
});
$("#draw").click(function(){
    canvas.isDrawingMode = true;
});

$("#canvas2json").click(function(){
    canvas.isDrawingMode = false;
    alert(JSON.stringify(canvas));
});
$("#canvas2svg").click(function(){
    canvas.isDrawingMode = false;
    alert(canvas.toSVG());
});

// Adding objects to the canvas...


// adding circle
var circle = new fabric.Circle({
    left: 200,
    top: 150,
    radius: 50,
    fill: "#299b71"
});
circle.hasRotatingPoint = true;
canvas.add(circle);

// adding triangle
var triangle = new fabric.Triangle({
    left: 250,
    top: 150,
    strokeWidth: 1,
    width:20,height:90,
    stroke: 'black',
    fill:'#ff8a1b',
    selectable: true,
    originX: 'center'
});
triangle.hasRotatingPoint = true;
canvas.add(triangle);