CODEWITHSUNDEEP
javascriptjqueryhtmlcanvaskineticjs
yonetpkbji
yonetpkbji

Reputation: 1019

HTML5 Canvas - Saving and Restoring drag and drop canvas states

Using this JS Fiddle I am able to dynamically create canvases and drag and drop images between all the different canvases.

var next = 4

    function addCanvas() {
        // create a new canvas element
        var newCanvas = document.createElement("canvas");
        newCanvas.id = "addedcanvases" + next; //added this to give each new canvas a unique id
        next++;
        newCanvas.width = canvasWidth;
        newCanvas.height = canvasHeight;
        // add a context for the new canvas to the contexts[] array
        contexts.push(newCanvas.getContext("2d"));
        // link the new canvas to its context in the contexts[] array
        newCanvas.contextIndex = contexts.length;
        // wire up the click handler
        newCanvas.onclick = function (e) {
            handleClick(e, this.contextIndex);
        };
        // wire up the mousemove handler
        newCanvas.onmousemove = function (e) {
            handleMousemove(e, this.contextIndex);
        };
        // add the new canvas to the page
        document.body.appendChild(newCanvas);
    }

The problem:

$("#saveCanvasStates").click(function () {
     // save canvases and images on them to a database
});

At the end of doing some dragging and dropping between the canvases the user needs to be able to press a 'Save' button (shown here JSFIDDLE) that will save the current state of all the canvases to a database i.e:

This is so that the user can then come back at a later time and carry on from where they left off - with the dragging and dropping feature still working.

What would be the best way of going about doing this?

Upvotes: 1

Views: 2471

Answers (1)

markE
markE

Reputation: 105015

All info necessary to save/restore user efforts is in your states[] array which contains javascript objects defining the status of all your drag-drop items.

Actually...

...There's a LOT of info about serializing, transporting, saving, retrieving and deserializing javascript objects ;)

For serializing javascript objects, use JSON.stringify which can serialize your array of objects into a single JSON string (JSON stands for JavaScriptObjectNotation). This single string is easily transported to your server for posting to your database.

To get your state information back, you can ask the server to give you that same JSON string back. You can turn that JSON string back into an array of objects using JSON.parse.

To transport and receive your JSON data string, you can use jQueries $.ajax method. Ajax can be used to send info to your server--this is called an ajax POST. Ajax can be used to request info from your server--this is called an ajax GET.

When your server gets a POST request, it will take the JSON string you supply and save it in a database.

When your server gets a GET request, it will query the database to retrieve the saved JSON string and send it back to your user.

Setting up a server and a database is beyond the scope of a stackoverflow question, but here is a nice series of tutorials on how jQuery, JSON, Ajax, Php and MySQL-database can be used together to save and restore state:

www.youtube.com/watch?v=Yz0RF__mFDU

Here is a quick example of client-side code to serialize and POST your state information:

// Serialize the states array

var JsonStringForTransport = JSON.stringify({stateForUserNumber7: states});

// POST the JSON to your server

var thePost = $.ajax({
    url: 'saveToServer.php',
    type: 'POST',
    dataType: 'json',
    data: JsonStringForTransport,
    contentType: 'application/json; charset=utf-8'
});

thePost.always(function(result){  
    // use this during testing to be sure something's happening
});

thePost.fail(function(result){  
    // handle failure
});

thePost.done(function(result){  
    // handle success
});

Good luck in your project! :)

Upvotes: 1

Related Questions