Search code examples
fabricjs

loadFromJSON in Fabricjs breaks if there is text with a line break

I'm using Fabric.js to make a canvas you can draw pictures on. If the user adds text with a line break in it e.g.

New
line

Then when I use JSON.stringify(canvas); I get a string with a line break in it. This is breaking fabric when I try to use loadFromJSON to load the saved drawing.

I'm getting the following error in console because of the line break:

Uncaught SyntaxError: Unexpected token ILLEGAL

Is there some way I can remove all the line breaks and then replace them with something like \n so that I still have them when the canvas loads?

Solution

  • It turns out I needed to use PHP json_encode() on the Json string before saving it to the database. That would replace \n with \\n and also allowed me to include quotes.

    The only problem is that it would wrap the whole thing in " " so I just had to remove the first and last character before using it with loadFromJSON();