Add local storage to save canvas drawing

Question

I do not know how to add local storage to save the drawing made on the canvas so when the page is reloaded the existing drawing is loaded onto the canvas through local storafe. I do not have must experience so would appreciate if someone could edit my code with the local storage addition. Many thanks in advance!

Here is my JS:

var canvas, ctx,
    brush = {
        x: 0,
        y: 0,
        color: '#000000',
        size: 10,
        down: false,
    },
    strokes = [],
    currentStroke = null;

function redraw () {
    ctx.clearRect(0, 0, canvas.width(), canvas.height());
    ctx.lineCap = 'round';
    for (var i = 0; i < strokes.length; i++) {
        var s =strokes[i];
        ctx.strokeStyle = s.color;
        ctx.lineWidth = s.size;
        ctx.beginPath();
        ctx.moveTo(s.points[0].x, s.points[0].y);
        for (var j = 0; j < s.points.length; j++){
            var p = s.points[j];
            ctx.lineTo(p.x, p.y);
        }
        ctx.stroke();
    }

}
function init () {
    canvas = $('#draw');
    canvas.attr({
        width: window.innerWidth,
        height: window.innerHeight,
    });
    ctx = canvas[0].getContext('2d');


    function mouseEvent (e){
                brush.x = e.pageX;
        brush.y = e.pageY;

        currentStroke.points.push({
            x: brush.x,
            y: brush.y,

        });



        redraw();
    }
    canvas.mousedown(function (e){
        brush.down = true;

        currentStroke = {
            color: brush.color,
            size: brush.size,
            points: [],
        };
        strokes.push(currentStroke);

        mouseEvent(e);
    }) .mouseup(function (e) {
        brush.down = false;

        mouseEvent(e);

        currentStroke = null;
    }) .mousemove(function (e) {
        if (brush.down)
            mouseEvent(e);
    });

    $('#save-btn').click(function () {
        window.open(canvas[0].toDataURL());
    });
    $('#undo-btn').click(function (){
        strokes.pop();
        redraw();
    });
    $('#clear-btn').click(function (){
        strokes = [];
        redraw();
    });

    $('#color-picker').on('input', function () {
        brush.color = this.value;
    });
    $('#brush-size').on('input', function () {
        brush.size = this.value;
    });
    }
$(init);

Answer 1

Using the Canvas.js helper you can simply do:

const canvas = new Canvas( 'my-canvas' );
canvas.saveToStorage( 'balls' );

where

• my-canvas is the canvas id
• balls is the key to save it as

To later restore a canvas state:

const canvas = new Canvas( 'my-canvas' );
canvas.restoreFromStorage( 'balls' );

Load Canvas.js:

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/Canvas.js">

EDIT

After reading the below post (Thank you @Shashank), ive made a jsfiddle with the complete code to achieve continous drawing. It automatically saves the last stroke on mouseup and loads it in on refresh. Check it out!

It uses Canvas.js and Pointer.js:

https://jsfiddle.net/wk5ttqa2/

EDIT 2

Just for fun... this is as simple as it can get really:

https://jsfiddle.net/GustavGenberg/1929f15t/1/

Note that it does not draw complete lines when moving fast (depends on framerate)...

Answer 2

Canvas.js will save the canvas as an image to the localStorage which is not helpful in your case as you're storing the mouse events in an array.

If you're looking for a solution which lets continue the drawing on canvas along with restoring old (saved) elements, what you would need is storing of the canvas elements (strokes array in your case) in the localStorage and restoring, redrawing the canvas.

Here's a demo doing that:

JS FIDDLE DEMO

1. Draw anything on the canvas.
2. Click on the "Save to local storage" button at the bottom.
3. Refresh the page.

To clear localStorage, clear the browser cache.

Relevant code changes:

1. Added a button in HTML to save to local storage

   <button id="save-to-local-storage">
      Save to local storage
   </button>
   

2. Saving the strokes array to the localStorage on above button click.

   $('#save-to-local-storage').click(function () {
     localStorage.setItem('canvas_strokes', JSON.stringify(strokes)); 
   });
   

3. On page refresh, check if localStorage has items set and if YES, redraw the canvas:

   // check if localstorage has an array of strokes saved 
   if(localStorage.getItem('canvas_strokes')) { 
      strokes = JSON.parse(localStorage.getItem('canvas_strokes'));
      redraw();
   }
   

Let me know if you have any questions. Hope this helps. :)