canvas to png in fabricjs

by Steve Eberhardt

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="canvas2png">Canvas 2 PNG</button>

JavaScript

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

$("#canvas2png").click(function(){
    canvas.isDrawingMode = false;

    if(!window.localStorage){alert("This function is not supported by your browser."); return;}
    // to PNG
    var image = new Image();
    image.src = canvas.toDataURL('png')
    var w = window.open("");
    w.document.write(image.outerHTML);
});

// Adding objects to the canvas...

// adding text
var text = new fabric.Text('Text inside canvas', { 
  left: 40, 
  top: 50 
});
text.hasRotatingPoint = true;
canvas.add(text);

// 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: 130,
    top: 150,
    strokeWidth: 1,
    width:70,height:90,
    stroke: 'black',
    fill:'#ff8a1b',
    selectable: true,
    originX: 'center'
});
triangle.hasRotatingPoint = true;
canvas.add(triangle);