www.webdeveloper.com
Results 1 to 6 of 6

Thread: localstorage

  1. #1
    Join Date
    Aug 2012
    Posts
    3

    localstorage

    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!

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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.

  3. #3
    Join Date
    Aug 2012
    Posts
    3

    localstorage

    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>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Quote Originally Posted by swingman View Post
    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.

  5. #5
    Join Date
    Aug 2012
    Posts
    3
    Thanx alot...

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    You're most welcome.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles