CODEWITHSUNDEEP
javascriptjquerycanvassavelocal-storage
droberts
droberts

Reputation: 41

JavaScript Painting Application Save Slots

I've created a painting application in JavaScript, and am now attempting to include a number of save slots where the user can save and load their work (using localStorage()). I have managed to sort out the actual saving / loading mechanism, but have run into an issue with the loading interface.

In it, I have eight smaller canvas elements (one for each save slot), which I want to display an image of what was displayed on the main canvas at the point of saving - a snapshot of what will be loaded when the image is restored (and for these slots to stay the same even when the page is closed). My issue is that I cannot get the smaller canvas elements to display the correct image - an image is only shown in the first one, and does not move over to the second, and so on.

Currently, I've assigned each small canvas it's own canvas and context variable, like so:

var slot1 = $('#slot01');
var context1 = slot1.get(0).getContext('2d');
var slot2 = $('#slot02');
var context2 = slot2.get(0).getContext('2d');
var slot3 = $('#slot03');
var context3 = slot3.get(0).getContext('2d');
var slot4 = $('#slot04');

enabling me to access each one individually. I'm using an if statement to detect whether a localStorage() key is set, and then using that to see if the next slot should be filled. Unfortunately, this approach doesn't seem to be working.

if(localStorage.getItem("painting01"))
    {
        var painting = new Image;
        painting.src = localStorage.getItem("painting");
        context2.drawImage(painting, 0, 0);

        var painting02 = localStorage.setItem("painting02", slot2.toDataURL("image/png"));
    }
else if(localStorage.getItem("painting02"))
    {
        var painting = new Image;
        painting.src = localStorage.getItem("painting");
        context3.drawImage(painting, 0, 0);

        var painting03 = localStorage.setItem("painting03", slot3.toDataURL("image/png"));
    }
else if(localStorage.getItem("painting03"))
    {
        var painting = new Image;
        painting.src = localStorage.getItem("painting");
        context4.drawImage(painting, 0, 0);

        var painting04 = localStorage.setItem("painting04", slot4.toDataURL("image/png"));
    }

I'm not sure if I'm along the right line, or going in completely the wrong direction with this problem, but I'd appreciate a little help solving it - I hope I've explained it well enough. Thanks!

Upvotes: 0

Views: 187

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

You are using 8 similar canvases : 8 is a number high enough to use arrays, more generic loops/functions or even some Class, i think you should debug just by clarifying the code this way.

Below i just give a small example to clarify what i mean :

Here is the code that will 'load' the slots :

// store all your slot data here
var slots     = [];
var slotCount = 8 ;

// retrieve all slots.
for (var i=0; i<slotCount; i++) slots[i] = getSlot(i);

// retrieve the i-th slot.
function getSlot(i) { 
   var thisCanvas = $('#slot' + i.toFixed(2)); // retrieve canvas
   var thisContext = thisSlot.get(0).getContext('2d');  // retrive canvas's context2d
   var thisStoredImage = localStorage.getItem("painting" + i.toFixed(2) ); // check localstorage
   // build one object with all this data and return it
   return { index : i , 
            canvas : thisCanvas, 
            context : thisContext, 
            storedImage : thisStoredImage };
}

A few examples of use for those slots : 

// returns a free slot if found, or null if none found.
function findFreeSlot() {
    for (var i = 0; i<slotCount; i++) { // iterate through slots.
        var thisSlot = slots[i];
        if (!thisSlot.storedImage) return thisSlot;
    }
    return null;
}

// add event handler for all slots
function hookAllSlots() {
    for (var i = 0; i<slotCount; i++) {
        var thisSlot = slots[i];
        thisSlot.canvas.addEventListener('click', slotClicked.bind(null, thisSlot) );
    }
}

 // function called when [slot] is clicked.
 function slotClicked(slot) {
      // here, slot is the slot that was last clicked.
      // you have access slot.index, slot.canvas, ...
 }

Upvotes: 1

Related Questions