Saving Draw Canvas positions when user clicks

Question

I have a canvas draw feature:

var sketcher = null;
  var brush = null;


  $(document).ready(function(e) {

    brush = new Image();
      brush.src = 'assets/brush2.png';
      brush.onload = function(){
            sketcher = new Sketcher( "sketch", brush );
      }             
 });

That uses sketcher.js. This allows the user to stamp a pattern depending on what brush pattern is used.

I want to be able to save the users click positions to localstorage and recall them if possible.

Here is the positions I want to save on the image below you can see the orangey/yellow dots that a user has clicked. I want to be able to save them out and recall them.

Answer 1

Here's my dirty attempt, you'll have to clean it up a little bit: http://jsfiddle.net/ACt6v/2/

var canvas = document.getElementById("the-canvas");
var ctx = canvas.getContext("2d");
var clicks = [];
var localStorageEnabled = typeof(Storage);
var loadLink = document.getElementById("load");

canvas.onmousedown = function(e) {
    clicks.push({
        x: e.clientX,
        y: e.clientY
    })

    ctx.fillStyle="blue";
    ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10);

  if( localStorageEnabled !=="undefined" ) {
      localStorage["clicks"] = JSON.stringify(clicks);
  }

}

loadLink.onmousedown = function(e) {
    e.preventDefault();
    console.log(localStorage["clicks"]); //view the console to see the clicks
    var readClicks = JSON.parse(localStorage["clicks"]);

    for (var i = 0 ; i < readClicks.length ; i++) {
        ctx.fillStyle="red";
        ctx.fillRect(readClicks[i].x - 5, readClicks[i].y - 5, 10, 10);
    }
}

basically you save an array as a json string which contains all the coordinates of the points. This requires that the user clicks to create the dots. If you need to find the dots dynamically you will need another clean canvas.