Javascript 用户单击时保存绘制画布位置

我有一个画布绘制功能：

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 );
      }             
 });

它使用sketcher.js。这允许用户根据所使用的笔刷图案来标记图案

我希望能够将用户单击位置保存到localstorage，并在可能的情况下调用它们

下面是我想保存在下图中的位置，您可以看到用户单击的橙色/黄色圆点。我希望能够将它们保存下来，并将它们召回

---

这是我的肮脏尝试，你得把它清理一下：

var canvas=document.getElementById（“画布”）；
var ctx=canvas.getContext（“2d”）；
var=[]；
var localStorageEnabled=typeof（存储）；
var loadLink=document.getElementById（“加载”）；
canvas.onmousedown=函数（e）{
点击。推({
x:e.clientX，
y:e.clientY
})
ctx.fillStyle=“蓝色”；
ctx.fillRect（e.clientX-5，e.clientY-5,10,10）；
如果（localStorageEnabled！=“未定义”）{
localStorage[“clicks”]=JSON.stringify（clicks）；
}
}
loadLink.onmousedown=函数（e）{
e、 预防默认值（）；
log（localStorage[“clicks”]；//查看控制台以查看单击
var readClicks=JSON.parse（localStorage[“clicks”]）；
对于（var i=0；i

基本上，将数组保存为json字符串，其中包含点的所有坐标。这需要用户单击以创建点。如果您需要动态查找点，则需要另一块干净的画布

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);
    }
}