Can the current drawings in a canvas be saved to a database? How do we re-draw the saved object?

[creedrahul]

I am trying to save the current drawings to a database for future use. So far I am sure it can be saved but i am not sure if it can be re-draw-ed to the canvas. Also there are errors in cross domain call between canvas-designer application and WCF web-service which i am using in the save process. I am running my site on https is there any thing more that can be done to re-solve this cross domain errors.

[arvidj]

Hi, I would like to do something similar. How do you save the drawing to a database? Or more specifically, how do you programmatically retrieve the points from a designer?

Perhaps it is better to have a WebRTC-client which acts as a listener on the drawing, storing everything sync it receives?

[creedrahul]

What i did was retrieve values from code tab of canvas-designer using var currentFile = $('#code-text').val(); What i got using above line was a array which looked like following [["line", [154, 128, 154, 128], ["2", "#6c96c8", "transparent", "1", "source-over", "round", "round", "15px Verdana"]], ["line", [154, 128, 162, 129]], ["line", [162, 129, 177, 133]], ["line", [177, 133, 201, 135]], ["line", [201, 135, 231, 147]], ["line", [231, 147, 266, 156]]] I then saved this array to my database and when ever i wanted to retrieve it from database and draw the old figure again on canvas i just fetched this array from database and passed it to a function called syncData . Once this array was passed to syncData function it would take care of rest issues, but it is essential that the array was passed in right format to syncData function. You don't need a WebRTC-client which acts as a listener on the drawing, storing everything. As this array is a perfect record of all the changes you did on canvas. Just saving this array and retrieving it as per need will get your work done.

[muaz-khan]

Get points from the "canvas-designer"

designer.addSyncListener(function(array) {
    var blob = new Blob(array, {
        type: 'text/plain'
    });
    uploadToServer(blob); // you an upload/save [array] or blob or array-buffer or data-URL
});
designer.sync(); // ask designer to return array in the above callback

Get/download from server

var serverBlob = getFromServer();
var reader = new FileReader();
reader.onload = function() {
    var array = this.result;
    designer.syncData(array); // pass array back to canvas-designer
};
reader.readAsText(serverBlob);

[arvidj]

Okay, thanks! Is there any callback that can be used to be notified when the user changes the canvas?