CODEWITHSUNDEEP
javascripthtmlcanvas
uzr
uzr

Reputation: 1210

Save Canvas between pageloads

Ive been trying to make the canvas save between page refreshes using html5 local storage, but the canvas always gets back to blank when i refresh the page.

HTML

            <canvas onload="loadCanvas()" onClick="canvas(event)" id="myCanvas"    width="400" height="400">
               Your browser does not support the canvas element
           </canvas>

Javascript:

function saveCanvas() {
var c = document.getElementById("myCanvas"),
    ctx = c.toDataURL();

if (typeof (localStorage) !== "undefined") {

    localStorage.setItem('myCanvas', ctx);
} else {
    document.getElementById("save").innerHTML.dataURL = "Local Storage not supported";
}
}

function loadCanvas() {

var image = localStorage.getItem('myCanvas');

document.getElementById('myCanvas').src = image;
}

saveCanvas function gets called when something has been drawed in the canvas

Anyone knows what the problem is?

It has been solved, onLoad did not work in canvas

Upvotes: 1

Views: 1177

Answers (1)

user1693593
user1693593

Reputation:

localStorage can only save so much, ie. in most browsers 5 mb and in others less.

Another caveat is that each char stored takes 2 bytes due to unicoding so the storage is in reality only half of this in the practical sense. There is no guarantee about size as this is not defined by the standard - 5 mb is only a suggestion so browsers can use any size.

You are getting the image as a PNG as this is the default format of toDataURL(). If the produced data-uri is too large (which is likely here as base-64 adds 33% to the size + a small header) the save will truncate or fail depending on the browser.

This is most likely (as you don't state size of canvas or the resulting data-uri) why your canvas is blank when you try to reload the data-uri as it would be invalid.

You can try to save as JPEG instead:

dataUri = c.toDataURL('image/jpeg', 0.5); /// 0.5 is quality, higher is better

If this does not work then you will need to look into other local storage mechanisms such as Indexed DB (where you can request a storage quota) or File API (but this is only supported in Chrome at this moment). There is also the deprecated Web SQL which will be around for still a while.

Update

Also try to move your onload from canvas element to window:

window.onload = function() {
    var image = localStorage.getItem('myCanvas');
    document.getElementById('myCanvas').src = image;
}

Note: you cannot set a src on a canvas element (as the ID from your code here suggest as well as your example code show). You need an image element for that. When you set a src on an image you also need to use the onload handler on the image, so an example could be:

window.onload = function() {
    var img = new Image;
    img.onload = function() {
        var ctx = document.getElementById('myCanvas').getContext('2d');
        ctx.drawImage(img, 0, 0);
        /// call next step here...
    }
    img.src = localStorage.getItem('myCanvas');
}

Usually I suggest (and others did too in this thread) people store their drawings as points and shape types in an array as objects which then is serialized to a string which you instead store in localStorage. It involves a little bit more code in the render stage (which you need anyways to update canvas when it is blanked for some reason) but is worth it.

Upvotes: 2

Related Questions