How to change attribute name which is dropped on another paper?
This is my markup and code:
<!DOCTYPE html>
<html>
<head>`enter code here`
<link href="css/joint.min.css" rel="stylesheet" type="text/css"/>
<link href="css/joint.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/lodash.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
<script src="js/joint.js" type="text/javascript"></script>
<script src="js/joint.min.js" type="text/javascript"></script>
<script src="js/circle-constraint.js" type="text/javascript"></script>
<link href="css/cascadeTest.css" rel="stylesheet" type="text/css"/>
<script src="js/inspector.js" type="text/javascript"></script>
</head>
<body>
<div id="stencil"></div>
<div id="paper"></div>
<div class="inspector-container"></div>
<script>
// Canvas where sape are dropped
var graph = new joint.dia.Graph;
paper = new joint.dia.Paper({
el: $('#paper'),
model: graph
});
// Canvas from which you take shapes
var stencilGraph = new joint.dia.Graph;
stencilPaper = new joint.dia.Paper({
el: $('#stencil'),
height: 60,
model: stencilGraph,
interactive: false
});
var r1 = new joint.shapes.basic.Rect({
position: {
x: 10,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1'
}
}
});
var r2 = new joint.shapes.basic.Rect({
position: {
x: 120,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2'
}
}
});
var erd = joint.shapes.erd;
erd.ISA.prototype.getHighlighterPath = function (w, h) {
return ['M', -8, 1, w + 8, 1, w / 2, h + 2, 'z'].join(' ');
};
var isa = new erd.ISA({
position: {x: 400, y: 10},
attrs: {
text: {
text: 'ISA',
fill: '#ffffff',
'letter-spacing': 0,
style: {'text-shadow': '1px 0 1px #333333'}
},
polygon: {
fill: '#fdb664',
stroke: 'none',
filter: {name: 'dropShadow', args: {dx: 0, dy: 2, blur: 1, color: '#333333'}}
}
}
});
var earth = new joint.shapes.basic.Circle({
position: {x: 250, y: 10},
size: {width: 100, height: 40},
attrs: {text: {text: 'circle'}, circle: {fill: '#2ECC71'}},
name: 'earth'
});
var image = new joint.shapes.basic.Image({
position: {
x: 500,
y: 10
},
size: {
width: 80,
height: 40
},
attrs: {
image: {
"xlink:href": "download.jpg",
width: 80,
height: 40
}
}
});
stencilGraph.addCells([r1, r2, earth, isa, image]);
stencilPaper.on('cell:pointerdown', function(cellView, e, x, y) {
$('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
var flyGraph = new joint.dia.Graph,
flyPaper = new joint.dia.Paper({
el: $('#flyPaper'),
model: flyGraph,
interactive: false
}),
flyShape = cellView.model.clone(),
pos = cellView.model.position(),
offset = {
x: x - pos.x,
y: y - pos.y
};
flyShape.position(0, 0);
flyGraph.addCell(flyShape);
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
$('body').on('mousemove.fly', function(e) {
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
});
$('body').on('mouseup.fly', function(e) {
var x = e.pageX,
y = e.pageY,
target = paper.$el.offset();
// Dropped over paper ?
if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
var s = flyShape.clone();
s.position(x - target.left - offset.x, y - target.top - offset.y);
graph.addCell(s);
}
$('body').off('mousemove.fly').off('mouseup.fly');
flyShape.remove();
$('#flyPaper').remove();
});
});
</script>
</body>
</html>
once the element is dropped you are having it in
graph.addCell(s);
s.attr('attributeName/text',newValue)
assuming the new attribute has property text.
Related
I am stuck in applying zoom on the elements (directed graph) generated within the svg. The original code uses the d3js v3 library and is shown below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[AF-PATTERN-EDITOR]</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="compiled-css" type="text/css">
.node, .link-label {
fill:#ccc;
stroke: #fff;
stroke-width: 2px;
}
.node-active {
stroke: #555;
stroke-width: 1.5px;
}
.link-active {
stroke: #555;
stroke-opacity: 5;
}
line {
stroke: rgb(212, 212, 212);
stroke-width: 1px;
shape-rendering: crispEdges;
}
.overlay {
fill: none;
pointer-events: all;
}
.link{
stroke: #ccc;
stroke-width: 2px;
}
svg {
box-sizing: border-box;
border: 1px solid rgb(212, 212, 212);
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script type="text/javascript">
var width = 960,
height = 500,
resolution = 150,
r = 15;
/*var graph = {
"nodes": [
{"task": "1", "label": "1", "social": "I", "id": 1, "x": 150, "y": 450},
{"task": "2", "label": "2", "social": "G", "id": 2, "x": 300, "y": 150},
{"task": "3", "label": "3", "social": "T", "id": 3, "x": 450, "y": 300}
],
"links": [
{"source": "1", "target": "2", "type": "N:1"},
{"source": "2", "target": "3", "type": "1:N"},
{"source": "1", "target": "3", "type": "1:1"}
]
}*/
var margin = {
top: -5,
right: -5,
bottom: -5,
left: -5
};
var colors = d3.scale.category20();
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.append('g');
svg.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "scale(" + d3.event.scale + ")")
}));
var force = d3.layout.force()
.charge(-200)
.linkDistance(50)
.size([width + margin.left + margin.right, height + margin.top + margin.bottom])
svg.selectAll('.vertical')
.data(d3.range(1, width / resolution))
.enter().append('line')
.attr('class', 'vertical')
.attr('x1', function(d) { return d * resolution; })
.attr('y1', 0)
.attr('x2', function(d) { return d * resolution; })
.attr('y2', height);
svg.selectAll('.horizontal')
.data(d3.range(1, height / resolution))
.enter().append('line')
.attr('class', 'horizontal')
.attr('x1', 0)
.attr('y1', function(d) { return d * resolution; })
.attr('x2', width)
.attr('y2', function(d) { return d * resolution; });
svg.append('defs').append('marker')
.attr({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':40,
'refY':0,
'orient':'auto',
'markerWidth':5,
'markerHeight':5,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#777')
.style('stroke','none');
const graph = {nodes: [], links: []};
d3.json("graph.json", function (error, data) {
if (error) throw error;
//console.log(graph.nodes);
//console.log(graph.links);
graph.nodes = data.nodes;
graph.links = data.links;
update();
})
const update = () => {
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on('drag', dragged);
var link = svg.selectAll("line.link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.attr('marker-end','url(#arrowhead)')
.attr("data-source", function (d) {
return d.source;
})
.attr("data-target", function (d) {
return d.target;
})
.attr("x1", function (d) {
for (let node of graph.nodes) {
if (node.task === d.source)
return node.x;
}
})
.attr("x2", function (d) {
for (let node of graph.nodes) {
if (node.task === d.target)
return node.x;
}
})
.attr("y1", function (d) {
for (let node of graph.nodes) {
if (node.task === d.source)
return node.y;
}
})
.attr("y2", function (d) {
for (let node of graph.nodes) {
if (node.task === d.target)
return node.y;
}
})
.style("stroke-width", function(d) {
return Math.sqrt(d.value);
});
const links = graph.links.map(l => {
const source = graph.nodes.find(n => n.task === l.source);
const target = graph.nodes.find(n => n.task === l.target);
return {...l, source, target};
});
var linkLabel = svg.selectAll("g.link-label")
.data(links)
.enter()
.append("g")
.attr("class", "link-label")
.attr('transform', d => `translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
linkLabel.append('circle')
.attr('r', 20)
.style("fill", '#fff');
linkLabel.append('text')
.text(d => d.type)
.classed('label', true)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.style('stroke', 'none')
.style('fill', 'black')
//console.log('L: ', graph.links);
var node = svg.selectAll("svg.node")
.data(graph.nodes)
.enter().append('g');
node.append("circle")
.attr("class", "node")
.attr('node-id', d => d.social)
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr('r', r * 2)
.call(drag);//
node.append("text")
.attr("class", "label")
.attr('node-id', d => d.social)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.attr('dx', function(d) { return d.x; })
.attr('dy', function(d) { return d.y; })
.text(function(d) { return d.social; });
force.on("tick", function () {
link.attr("x1", function (d) { return d.source.x; })
.attr("y1", function (d) { return d.source.y; })
.attr("x2", function (d) { return d.target.x; })
.attr("y2", function (d) { return d.target.y; });
linkLabel.attr('transform', d => `translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
/*function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}*/
function dragged(d) {
var x = d3.event.x,
y = d3.event.y,
gridX = round(Math.max(r, Math.min(width - r, x)), resolution),
gridY = round(Math.max(r, Math.min(height - r, y)), resolution);
d3.select(this).attr('cx', d.x = gridX).attr('cy', d.y = gridY);
d3.select(this).attr('dx', d.x = gridX).attr('dy', d.y = gridY);
d3.selectAll(`[data-source='${d.task}']`).attr('x1', d.x).attr('y1', d.y);
d3.selectAll(`[data-target='${d.task}']`).attr('x2', d.x).attr('y2', d.y);
d3.select(`text[node-id='${d.social}']`).attr('dx', d.x).attr('dy', d.y)
linkLabel.attr('transform', d => `translate(${(d.source.x + d.target.x) / 2},${(d.source.y + d.target.y) / 2})`);
}
function round(p, n) {
return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
}
};
</script>
</body>
<html>
I have tried to reuse code regarding zoom functionality.. but to no avail. When I apply it, it generally "freezes" the network and I cannot interact with the network (move the nodes independently), i.e. all the elements move as a whole. How can I apply the zoom without affecting the characteristics of the generated graph?
I've been trying to learn fabric.js and am having a hard time figuring out how to target/select the shape i've just added on mouse:down, so that i can fade it out on mouse:up.
What i have so far: jsfiddle
var fingerCanvas = new fabric.Canvas('c');
var fingerMark = new fabric.Ellipse({
left: -100,
top: -100,
fill: '#ff0000',
originX: 'center',
originY: 'center',
rx: 35,
ry: 50
});
//fingerCanvas.add(fingerMark);
fingerCanvas.on('mouse:move', function(obj) {
fingerMark.top = obj.e.y;
fingerMark.left = obj.e.x;
//fingerCanvas.renderAll();
});
fingerCanvas.on('mouse:down', function(obj) {
fingerCanvas.add(fingerMark.clone());
//fingerCanvas.renderAll();
});
fingerCanvas.on('mouse:up', function(obj) {
//fade out the ellipse added by mouse:down event
});
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>
Anyone familiar with fabricjs and is able to point me in the right direction? Thanks
In animate method, give opacity property to animate and value to 0.
Added abort method to stop animation, if user clicking again in between 1 second.
DEMO
var fingerCanvas = new fabric.Canvas('c', {
selection: false
});
var fingerMark = new fabric.Ellipse({
left: 0,
top: 0,
fill: '#ff0000',
originX: 'center',
originY: 'center',
rx: 35,
ry: 50,
evented: false,
opacity: 0
});
var isMouseDown = false;
fingerCanvas.add(fingerMark);
fingerCanvas.on('mouse:move', function(options) {
if (isMouseDown) {
var pointer = fingerCanvas.getPointer(options.e);
fingerMark.set({
left: pointer.x,
top: pointer.y
})
fingerCanvas.requestRenderAll();
}
});
fingerCanvas.on('mouse:down', function(options) {
isMouseDown = true;
var pointer = fingerCanvas.getPointer(options.e);
fingerMark.set({
opacity: 1,
left: pointer.x,
top: pointer.y
});
});
fingerCanvas.on('mouse:up', function(obj) {
isMouseDown = false;
fingerMark.animate('opacity', 0, {
duration: 1000,
abort: function() {
return isMouseDown;
},
onChange: fingerCanvas.requestRenderAll.bind(fingerCanvas),
onComplete: function() {
fingerMark.set({
opacity: isMouseDown ? 1 : 0
});
fingerCanvas.requestRenderAll();
}
})
});
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
Fabric.js 2.3.6
I'm trying to clip an object to a path drawn with the free drawing bush. The code fails to show the image inside the path and I'm not sure what I'm doing wrong.
Multiple objects could be clipped, so I can't apply the path to the canvas itself.
let image = new Image();
let object;
let canvas;
// canvas
canvas = new fabric.Canvas("canvas", {
backgroundColor: "lightgray",
width: 1280,
height: 720,
preserveObjectStacking: true,
selection: false
});
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;
canvas.on("path:created", function(options) {
clip(options.path);
});
// clip
function clip(path) {
object.set({
clipTo: function(ctx) {
path.render(ctx);
}
});
canvas.requestRenderAll();
}
// image
image.onload = function() {
object = new fabric.Image(image, {
width: 500,
height: 500,
top: 50,
left: 50
});
canvas.add(object);
};
image.src = "http://i.imgur.com/8rmMZI3.jpg";
https://jsfiddle.net/o91rv38q/7/
In order to clip on the same spot when is path has been drawn, you need to reset pathOffset for a SVG path, and setTransform to the ctx. Your clip function will look like:
function clip(path) {
path.set({pathOffset: {x: 0, y: 0}});
object.set({
clipTo: function(ctx) {
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.beginPath();
path._renderPathCommands(ctx);
ctx.restore();
}
});
canvas.requestRenderAll();
}
_renderPathCommands - renders a path.
Updated fiddle
To clip multiple objects you'll need to have some sort of an array of objects and then combine then into single path:
function combinePaths (paths) {
if (!paths.length) {
return null;
}
let singlePath = paths[0].path;
for (let i = 1; i < paths.length; i++){
singlePath = [...singlePath, ...paths[i].path];
}
return new fabric.Path(singlePath, {
top: 0,
left: 0,
pathOffset: {
x: 0,
y: 0
}
});
}
Here is an example with multiple paths to clip:
// canvas
let canvas = new fabric.Canvas("canvas", {
backgroundColor: "lightgray",
width: 1280,
height: 720,
preserveObjectStacking: true,
selection: false
});
let paths = [];
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;
canvas.on("path:created", function (options) {
paths.push(options.path);
clip(combinePaths(paths));
});
function combinePaths(paths) {
if (!paths.length) {
return null;
}
let singlePath = paths[0].path;
for (let i = 1; i < paths.length; i++) {
singlePath = [...singlePath, ...paths[i].path];
}
return new fabric.Path(singlePath, {
top: 0,
left: 0,
pathOffset: {
x: 0,
y: 0
}
});
}
function clip(path) {
if (!path) {
return;
}
object.set({
clipTo: function (ctx) {
var retina = this.canvas.getRetinaScaling();
ctx.save();
ctx.setTransform(retina, 0, 0, retina, 0, 0);
ctx.beginPath();
path._renderPathCommands(ctx);
ctx.restore();
}
});
canvas.requestRenderAll();
}
// image
let image = new Image();
let object;
image.onload = function () {
object = new fabric.Image(image, {
width: 500,
height: 500,
top: 50,
left: 50
});
object.globalCompositeOperation = 'source-atop';
canvas.add(object);
};
image.src = "http://i.imgur.com/8rmMZI3.jpg";
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.js"></script>
<canvas id="canvas" width="1280" height="720"></canvas>
I have a canvas and have 2 images on it one is not evented and other we can change. Now I'm trying to change/replace image using file input, everything is fine just while changing the image it replaces the one I want but also adds one on top. I want to change the Image with id='changeimg'
//Add Image to Canvas
var imgObj = new Image();
//imgObj.id='changeimg';
imgObj.src = "blank.png";
var imgmain = imgObj.onload = function() {
var image = new fabric.Image(imgObj);
image.set({
id: 'changeimg',
angle: 0,
height: 350,
width: canvas.getWidth(),
align: 'mid', //added
originX: 'center', //added
originY: 'center', //added
});
canvas.centerObject(image);
canvas.add(image);
}
var imgObj1 = new Image();
//imgObj1.id='backgroundimg';
imgObj1.src = "template1.png";
var imgmain = imgObj1.onload = function() {
var image1 = new fabric.Image(imgObj1);
image1.set({
id: 'backgroundimg',
angle: 0,
height: canvas.getHeight(),
width: canvas.getWidth(),
evented: false,
});
//canvas.centerObject(image1);
canvas.add(image1);
}
//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(file) {
addImage(file.target.result);
}
reader.readAsDataURL(file);
}
function addImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
img.set({
'left': 50
});
img.set({
'top': 150
});
img.scaleToWidth(250);
img.scaleToHeight(250);
var cnt = 0;
var objs = canvas.getObjects();
//var objs = canvas.getActiveObject();
if (objs.length > 0) {
objs.forEach(function(e) {
if (e && e.type === 'image' && e.id === "changeimg") {
e._element.src = imgLink;;
canvas.renderAll();
cnt = 1;
}
});
}
});
}
Use imageEl.setSrc to change source of image element.
DEMO
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL("https://picsum.photos/200/300/?random", function(img) {
img.set({
id: 'changeimg',
align: 'mid', //added
originX: 'center', //added
originY: 'center', //added,
scaleX: 200 / img.width,
scaleY: 200 / img.height,
});
canvas.centerObject(img);
canvas.add(img);
image = img;
})
fabric.Image.fromURL("https://picsum.photos/200/250/?random", function(img) {
img.set({
id: 'backgroundimg',
angle: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
});
//canvas.centerObject(image1);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
})
//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(file) {
addImage(file.target.result);
}
reader.readAsDataURL(file);
}
function addImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
var objects = canvas.getObjects();
for (var i = 0, l = objects.length; i < l; i++) {
if (objects[i].id == 'changeimg') {
imageEl = objects[i];
break
}
}
if (imageEl) {
imageEl.setSrc(img.getSrc(), function() {
canvas.renderAll()
imageEl.setCoords();
},{
left: 50,
top: 150,
scaleX: 150 / img.width,
scaleY: 200 / img.height,
})
}
});
}
canvas{
border:2px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>
<canvas id="c" width=500 height=500></canvas><br>
<input type='file' id='uploadedImg'>
After loading canvas data from JSON, an element with the custom type attribute isn't renders.
Here is jsFiddle.
Steps to reproduce are:
1) Click on SAVE button
2) Mover RED element somewhere
3) Click on RESTORE button
Nothing happens, but if the type attribute is commented out, then everything works just perfect.
Not sure if it's a bug or I forgot to add something...
Tnx
fabric.ContainerRect = fabric.util.createClass(fabric.Rect, {
type: 'container-rect',
initialize: function(options) {
this.callSuper('initialize', options);
this.on('moving', function() {
// console.log('Red is moving...');
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
fabric.ContainerRect.fromObject = function(options) {
return new fabric.ContainerRect(options);
}
//==========================================================================================
let store;
const canvas = new fabric.Canvas('paper');
const canvasOriginalSize = {
width: 600,
height: 600
};
const redBox = new fabric.ContainerRect({
left: 0,
top: 0,
width: 50,
height: 50,
fill: 'red'
});
canvas.add(redBox);
canvas.renderAll();
$("#save").on('click', function() {
store = canvas.toJSON();
console.log(store);
});
$("#restore").on('click', function() {
canvas.loadFromJSON(store, function() {
//console.log('restored:', canvas.getObjects());
//canvas.renderAll();
});
});
#paper {
border: solid 1px red;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>
fabric.ContainerRect.fromObject = function(object, callback) {
return fabric.Object._fromObject('ContainerRect', object, callback);
};
You need to use callback in fromObject.
If you remove type then it takes rect type for its object and while loadingfrom json it takes fabric.Rect.fromObject method not your fabric.ContainerRect.fromObject, thats why working.
DEMO
fabric.ContainerRect = fabric.util.createClass(fabric.Rect, {
type: 'container-rect',
initialize: function(options) {
this.callSuper('initialize', options);
this.on('moving', function() {
// console.log('Red is moving...');
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
fabric.ContainerRect.fromObject = function(object, callback) {
return fabric.Object._fromObject('ContainerRect', object, callback);
};
//==========================================================================================
let store;
const canvas = new fabric.Canvas('paper');
const canvasOriginalSize = {
width: 600,
height: 600
};
const redBox = new fabric.ContainerRect({
left: 0,
top: 0,
width: 50,
height: 50,
fill: 'red'
});
canvas.add(redBox);
canvas.renderAll();
$("#save").on('click', function() {
store = canvas.toJSON();
console.log(store);
});
$("#restore").on('click', function() {
canvas.loadFromJSON(store, function() {
console.log('restored:');
});
});
#paper {
border: solid 1px red;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>