JavaScript
var canvas;
function createNewCanvas(name, width, height, background, callback){
var w = parseInt(width, 10);
var h = parseInt(height, 10);
// TODO verify background
var b = background;
// add DOM canvas
var c = "<canvas id='"+name+"' width='"+w+"' height='"+h+"'></canvas>";
$("#containerCanvas").html(c);
// create fabric canvas
canvas = new fabric.Canvas(name);
canvas.setWidth(w);
canvas.setHeight(h);
canvas.backgroundColor = b;
canvas.renderAll();
if(callback){
callback("OK");
}
}
$("#openFile").click(function(){
$('#addText').attr("disabled", true);
createNewCanvas("Test", 300, 300, "#DD0000", function(event){
if(event == "OK"){
var str = '[{"objects":[{"type":"line","originX":"left","originY":"top","left":275,"top":101,"width":0,"height":100,"fill":"black","stroke":"black","strokeWidth":2,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","x1":0,"x2":0,"y1":-50,"y2":50},{"type":"line","originX":"left","originY":"top","left":432,"top":90,"width":0,"height":100,"fill":"black","stroke":"black","strokeWidth":2,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","x1":0,"x2":0,"y1":-50,"y2":50}],"background":"rgb(255, 255, 255)"}]';
canvas.loadFromJSON(str, function(){
canvas.renderAll();
});
}
});
});
$("#createFile").click(function(){
createNewCanvas("Test", 300, 300, "#0000DD", function(event){
if(event == "OK"){
...