Wayne Gilliver Wayne Gilliver - 10 months ago 91
Javascript Question

Load From Json fabricJS

I am trying to load an object from a textarea, below shows my code (with the export code) but I can't work out how to loadfromjson. Could anyone help please. I have scoured the internet looking for a similar example, but I cannot find one except the one on the kitchensink json tab.

// to JSON string

canvas.isDrawingMode = false;

if(!window.localStorage){alert("This function is not supported by your browser."); return;}

var json = JSON.stringify(canvas);


// from JSON string

var jsonLoad = "'" + document.getElementById("myTextArea")+ "'";


canvas = window.canvas = new fabric.Canvas('canvas');

canvas.loadFromJSON(jsonLoad, canvas.renderAll.bind(canvas));


Answer Source

The problem in your script is the following statement:

var jsonLoad = "'" + document.getElementById("myTextArea")+ "'";

this not return the content of your textarea, but the DOM element, and so the .toString result. Since you are using jQuery you could do something like


and so:

$(function() {
  var canvas = new fabric.Canvas('c');
  canvas.add(new fabric.Circle({
    radius: 50,
    left: 0,
    top: 0,
    fill: '#0B61A4'

  $("#canvas2json").click(function() {
    var json = canvas.toJSON();
  $("#loadJson2Canvas").click(function() {

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='c' width=300 height=150></canvas>
<button id='canvas2json'>canvas2json</button>
<button id='loadJson2Canvas'>loadJson2Canvas</button>
<textarea id='myTextArea'></textarea>