Save canvas as file? (and open file again) (without loosing quality) - svg

Question

The program I'm using is this
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
function AddCircle() {
canvas.add(new fabric.Circle({
left: 230/canvas.getZoom(),
top: 140/canvas.getZoom(),
radius: 75/canvas.getZoom(),
fill: 'green',
}));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="AddCircle()">Add Circles</button>
<br>
<br>
<button onclick="Saveas()">Save as</button>
<button onclick="Openfile()">Open file</button>
<div class="box">
<canvas id="c"></canvas>
So now. I want to save the canvas (all the content/all the circles or objects) as a file. At this point I have seen that there are a few ways to save, for example, as png. But The problem is that I don't want to loose quality of the work inside of canvas.
I have seen libraries like jason. But I really don't know to implement them.
Also I have seen that working with svg for saving as files is easier since it can be saved/open as .xhml file without loosing quality.
My other question is:
Is there a easy way to convert the canvas to xhml, so when you click save button, you save the file as xhml, once saved back to use it by clicking "open file button" to open the .xhml file and conver it to canvas again (to show the content in the workspace)?
This are just my thinkings, any suggestions, libraries you recommend more or demo snippets for solving this would be very appreciated.
My last is. What do you recommend more, working with canvas libraries or svg libraries?. Im planning to make a very basic app like Prezi.com is (create objects) Online saving files and so... (also I plan to insert svg and maybe animations to the work space)
As you see, now I'm using canvas libraries ( in particular fabric.js). But since I'm starting it'd be easier for me to change if I'm not using the best alternative.

Answer 1

I am not sure that is possible,
HTML Canvas it's a Bitmap, that you draw in with Javascript.
SVG embedded in an HTML document, It's just like a subtree of the DOM, that still has a valid XML representation that any (not sure if any but most), SVG editors and viewers will understand.
You can "emulate" a canvas with SVG, easily by setting a svg or div + svg and then appending all the childs to this svg and because the geometric ideas of drawing in canvas and doing vector graphics are not that different, you could "migrate" to it.
The tip here is to define a viewbox on the SVG as you would define the canvas dimensions, and then, you can preserve your units. (just be careful with the numbers)
Plus it would be easier to attach events to the SVG elements.
To be honest the w3schools tutorial on SVG it's comprehensive enough, the rest from that it's just a good use case and use their building blocks (with javascript)
This is how you would create an SVG element for the DOM.
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttributeNS(null, 'x', 5);
circle.setAttributeNS(null, 'y', 15);
# more code...

Answer 2

I think saving the image as a png file should be just fine. Png compression is lossless and supports transparent images, so drawing a previously saved png file to the canvas should perfectly restore the content without any changes.
Also, I'm not sure if storing it as a svg file would work that well, since svg is a vector graphics format and the canvas is a bitmap. I know it is possible to embed bitmap images in an svg file, but that requires it to be stored in a bitmap format in the first place.