localstorage

**swingman** · 08-14-2012 11:22 AM

Hi!
I am a beginner...
I simply want to know how do a local storage for my drawing in the canvas. Here is my html code. If you click on draw, a rectangle is drawn in the canvas. But how do I make the web browser remember the drawing when I update or load them website again using localstorage?

Code:

<!doctype html>
<html>
<head>
<title>Uppgift 3</title>
<script>

    function draw(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
    }
</script>
</head>
<body >
<canvas id="myCanvas" width="200" height="100"></canvas>
<input type="button" value="draw" onclick="draw()"/>
</body>
</html>

Your help really appreciated!

**rnd me** · 08-14-2012 12:26 PM

you can redraw it by following the same steps, or you can grab a copy of the pixel data using toDataURL(). save that data URL to localStorage[]. later load it into an img tag from localStorage[], and use drawImage() to paint the img tag into the canvas.

**swingman** · 08-14-2012 05:34 PM

So why is the following code not working?

Code:

<!doctype html>
<html>
<head>
<title>LS</title>
<script>
function load(){	
	var canvas  = document.getElementById("myCanvas");
    var img = new Image(),
    ctx = canvas.getContext('2d')
    img.src = window.localStorage[storageName];
    img.onload = function(){
        ctx.drawImage(img, 0, 0);
    };	
} 
    function draw(){
	var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
	//save local storage
	window.localStorage[storageName] = canvas.toDataURL();
    }
</script>
</head>
<body onload="load()">
<canvas id="myCanvas" width="200" height="100"></canvas>
<input type="button" value="draw" onclick="draw()"/>
</body>
</html>

**JMRKER** · 08-14-2012 09:11 PM

Originally Posted by swingman

So why is the following code not working?

Code:

<!doctype html>
<html>
<head>
<title>LS</title>
<script>
function load(){	
	var canvas  = document.getElementById("myCanvas");
    var img = new Image(),
    ctx = canvas.getContext('2d')
    img.src = window.localStorage[storageName];
    img.onload = function(){
        ctx.drawImage(img, 0, 0);
    };	
} 
    function draw(){
	var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
	//save local storage
	window.localStorage[storageName] = canvas.toDataURL();
    }
</script>
</head>
<body onload="load()">
<canvas id="myCanvas" width="200" height="100"></canvas>
<input type="button" value="draw" onclick="draw()"/>
</body>
</html>

Because storageName is not defined. Use 'storageName' and it works.

**swingman** · 08-15-2012 06:34 AM

Thanx alot...

**JMRKER** · 08-15-2012 02:51 PM

You're most welcome.
Happy to help.
Good Luck!

Thread: localstorage

Thread Tools

Display

localstorage

localstorage

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions