Redraw canvas using localStorage object in FabricJs

Question

My canvas id is "canvas-panel" I want to redraw my canvas using the localStorage object value when go to the next page. I am getting canvas object using localStorage object like below:

var myCanvas = JSON.parse(localStorage.getItem('canvas'));

JSON formate:

{
"objects":[

  {
     "type":"image",
     "originX":"left",
     "originY":"top",
     "left":42,
     "top":311,
     "width":100,
     "height":100,
     "fill":"rgb(0,0,0)",
     "stroke":null,
     "strokeWidth":1,
     "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",
     "src":"http://stg.souqueen.com/media/catalog/product/cache/1/image/300x300/9df78eab33525d08d6e5fb8d27136e95/1/9/19b_1024i1.PNG",
     "filters":[

     ],
     "crossOrigin":"",
     "alignX":"none",
     "alignY":"none",
     "meetOrSlice":"meet"
  }
],
"background":""
}

I am getting all canvas object with the help of this thread Select All the objects on canvas using Fabric.js

score 1 · Accepted Answer · answered Oct 11 '15 at 17:55

1

You have got your json. So now on next page you can import the objects using this :

canvas.loadFromJSON(myCanvas, canvas.renderAll.bind(canvas))

answered Oct 11 '15 at 17:55

Harsh Makani

761
5
11

It is loading in new canvas but not modifying existing canvas am i doing something wrong? – Hussain Oct 12 '15 at 10:11
check the `canvas` you are using. It may be the issue. – Harsh Makani Oct 12 '15 at 10:13

Redraw canvas using localStorage object in FabricJs

1 Answers1